使用react和d3從外部json獲取數據

Question

我是React的新手。 我正在使用v0.13.3。 我有一個正常運行的頁面（帶有指向外部css文件和外部js文件的鏈接的index.html）。 一切都很好。

JS文件完全包含此JSFIDDLE的JavaScript窗格中的內容 。 （抱歉，提琴無法運行，我無法弄清楚為什么控制台說Uncaught SyntaxError: Unexpected token < 。我在頂部有/** @jsx React.DOM */ ，但是無論如何...它制作了一張圖表。）

問題：我怎么得到里面的東西

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

而是來自外部JSON文件？ （如果JSON文件的內容發生更改，我希望圖表進行更新）。

（我意識到，可以使用React將d3圖表的所有部分分解為單獨的組件，並以此方式代替一個函數中的所有d3。但是現在，我希望它保持這種狀態方式-基於本文的結論。）

因此，在function createChart使用d3.json(path/to/file.js) 。 我已經嘗試了本教程中的 “掛鈎數據模型”和“從服務器獲取”下的內容，但是我沒有任何運氣。 另外，看了這篇文章 。 我懷疑我需要對componentDidMount和shouldComponentUpdate做其他事情，但是有點困惑。 搜索了其他示例，但找不到這樣的示例。 感謝您的任何建議。

Answer 1

JSFiddle中代碼的一個問題是您應該使用shouldComponentUpdate函數。 按照https://facebook.github.io/react/docs/component-specs.html的規定，這僅應返回一個布爾值，告訴React是否重新渲染，而不是嘗試更新DOM本身。 為了響應對道具的更新，在這種情況下，您可能會使用componentDidUpdate 。

通常，如果您需要在React組件中執行任何異步操作，則應在componentDidMount函數中進行，因此您在正確的位置。

在其他方面，我嘗試在createChart()使用d3.select("body") -您可以選擇從React作為dom createChart() d3.select("body")的<div> ，然后直接在其中附加<svg>一種使用React的更合適的方法（組件應該是獨立的，因此它們不會在自己外部修改DOM。請嘗試d3.select(dom).append('svg') 。

希望這會有所幫助！

PS：使用此Plunkr模板創建React片段時，我取得了一些不錯的效果： http ://plnkr.co/edit/tpl:a3vkhunC1Na5BG6GY2Gf?p=preview