adding javascript and css files to react

Question

I'm integrating d3-timeseries graph with react.

So, this graph uses 3 files of its own 2 javascript files and one css file.

files are available here : https://github.com/mcaule/d3-timeseries/tree/master/src

another file is :

<script src="https://d3js.org/d3.v3.min.js"></script>

In my react app, how should refer all these d3 javascript and css files? So, far I just included tags for all these files in my html. How to do it in react?

Also, d3-timeseries javascript code i should put in some file or refer only using . Please suggest, I'm new to react. Thanks.

Fatima

Answer 1

use import

import React from 'react';
import d3Js from 'https://d3js.org/d3.v3.min.js';
import 'path/to/your/file.css';

export default class MyNavbar extends React.Component {
    render(){
      return (
       <div> something </div>
      );
    }
}

Shanley

What about this file github.com/mcaule/d3-timeseries/blob/master/src/… ? – Fatima

How this one should be referenced and used? – Fatima

I should be copying this code in some file in react ? Please suggest, I'm really facing hard time to do this – Fatima

I'm trying to build something of this sort : mcaule.github.io/d3-timeseries; and my graphs are actually ready, but I'm not sure how to integrate this with react? On integration where I should be including this code: var chart = d3.timeseries() .addSerie(data,{x:'date',y:'n',diff:'n3'},{interpolate:'monotone',color:"#333"}) .width(900) chart('#chart') which actually draws graph – Fatima

This is misleading since it is not possible to import a module from an external url. This won't work – Kelley

Answer 2

Because the rendering of d3 and React differ in their concepts, its quite hard to integrate d3 inside React.

Its maybe better to use the React-Way D3 which provides this package: http://www.reactd3.org

Lawley