使用react和d3从外部json获取数据

Question

I am brand new to React. Am using v0.13.3. I have a functioning page (index.html with link to external css file and external js file). All works great.

JS file contains exactly what is in the JavaScript pane of this JSFIDDLE . (Apologies the fiddle doesn't run, I can't figure out why console says Uncaught SyntaxError: Unexpected token < . I have /** @jsx React.DOM */ at the top, but anyway...it makes a chart.)

QUESTION: How can I get what is in

var data = [{"letter":"A","frequency":0.08167},"letter":"B","frequency":0.01492},{"letter":"C","frequency":0.02782},{"letter":"D","frequency":0.04253},...]

to come from an external JSON file instead? (I want the chart to update if the JSON file's contents change).

(I realize there is the option to use React to break all of the pieces of the d3 chart into separate components and do it that way instead of all of the d3 inside one function. But for now, I'd like it to remain this way - based on the conclusion of this article .)

So, it didn't work to use d3.json(path/to/file.js) inside function createChart . And I've tried what is in this tutorial under "Hook Up the Data Model" and "Fetching from the server", but I'm not having any luck. Also, looked at this article . I'm suspecting I need to do something else with componentDidMount and shouldComponentUpdate , but a bit baffled. Searched for other examples, but having trouble finding one like this. Thanks for any suggestions.

Answer 1

One issue with the code in your JSFiddle is your use of the shouldComponentUpdate function. As per https://facebook.github.io/react/docs/component-specs.html this should only return a boolean telling React whether to re-render and not try to update the DOM itself. For responding to updates to props you would probably use componentDidUpdate in this case.

Generally if you need to do anything asynchronous in a React component, it should happen in the componentDidMount function, so you're on the right path there.

On other I would try is in createChart() you have d3.select("body") - you could select the <div> that you pass in from React as the dom prop and append the <svg> directly there, which would be a much more appropriate way of using React (Components should be self-contained, so they wouldn't go around modifying the DOM outside of themselves. Try d3.select(dom).append('svg') .

Hope this is helpful!

PS: I've had some good results using this Plunkr template to create React snippets: http://plnkr.co/edit/tpl:a3vkhunC1Na5BG6GY2Gf?p=preview