d4.js:1172 Uncaught ReferenceError: d4 is not defined
martinlendable opened this issue · comments
Trying to use d4 with reactjs::
Getting: d4.js:1172 Uncaught ReferenceError: d4 is not defined
import React from 'react';
import ReactDOM from 'react-dom';
import ReactFauxDOM from 'react-faux-dom';
import d3 from 'd3';
import d4 from 'd4';
class App extends React.Component {
render () {
const data =
[
{x: "For Investment", y: 13.27},
{x: "For Distribution", y: 8.66},
{x: "Outstanding Principal", y: 5.22},
{x: "Accrued Interest", y: 5}
];
const myChart = d4.charts.column().width(500)
const d = d3.select(ReactFauxDOM.createElement('div'))
.datum(data).call(myChart);
return d.node().toReact()
}
}
export default App;
Hi @martinlendable, Unfortunately I have no React experience. Is the Component a closure because if so maybe you need to pass the reference of d4 to it.
This is not a React issue, but rather an issue with the way that D4 is internally reliant on the presence of a d4
global. I suspect if @martinlendable is using React and getting this error then it's because he's using webpack to build his code, and it fails at
@martinlendable as a workaround, you can use https://github.com/webpack/script-loader: require('script!d4');