javascript 有没有什么合适的方法可以将 d3.js 图形集成到 Facebook React 应用程序中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21903604/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there any proper way to integrate d3.js graphics into Facebook React application?
提问by Vladimir Lebedev
Yes, I know there is react-art, but it seems to be broken.
是的，我知道有反应艺术，但它似乎被打破了。
The problem is that d3.js is all about mutating the browser DOM, and using it directly, say inside componentDidMount method, will not work properly, because all changes to browser DOM will not be reflected in React's virtual DOM. Any ideas?
问题是 d3.js 是关于改变浏览器 DOM 的，直接使用它，比如在 componentDidMount 方法内部，将无法正常工作，因为对浏览器 DOM 的所有更改都不会反映在 React 的虚拟 DOM 中。有任何想法吗？
回答by couchand
One strategy might be to build a black-box component that you never let React update. The component life cycle method shouldComponentUpdate()is intended to allow a component to determine on its own whether or not a rerender is necessary. If you alwaysreturn falsefrom this method, React will never dive into child elements (that is, unless you call forceUpdate()), so this will act as a sort of firewall against React's deep update system.
一种策略可能是构建一个永远不会让 React 更新的黑盒组件。组件生命周期方法shouldComponentUpdate()旨在允许组件自行确定是否需要重新渲染。如果你总是false从这个方法返回，React 永远不会潜入子元素（也就是说，除非你调用forceUpdate()），所以这将充当一种针对 React 深度更新系统的防火墙。
Use the first call to render()to produce the container for the chart, then draw the chart itself with D3 within the componentDidMount()method. Then it just comes down to updating your chart in response to updates to the React component. Though you might not supposedto do something like that in shouldComponentUpdate(), I see no real reason you can't go ahead and call the D3 update from there (see the code for the React component's _performUpdateIfNecessary()).
使用第一次调用来render()生成图表的容器，然后在componentDidMount()方法中使用 D3 绘制图表本身。然后归结为更新图表以响应 React 组件的更新。尽管您可能不应该在 中做类似的事情shouldComponentUpdate()，但我认为没有真正的理由您不能继续从那里调用 D3 更新（请参阅 React 组件的 代码_performUpdateIfNecessary()）。
So your component would look something like this:
所以你的组件看起来像这样：
React.createClass({
render: function() {
return <svg></svg>;
},
componentDidMount: function() {
d3.select(this.getDOMNode())
.call(chart(this.props));
},
shouldComponentUpdate: function(props) {
d3.select(this.getDOMNode())
.call(chart(props));
return false;
}
});
Note that you need to call your chart both in the componentDidMount()method (for the first render) as well as in shouldComponentUpdate()(for subsequent updates). Also note that you need a way to pass the component properties or state to the chart, and that they are context-specific: in the first render, they have already been set on this.propsand this.state, but in later updates the new properties are not yet set on the component, so you need to use the function parameters instead.
请注意，您需要在componentDidMount()方法（对于第一次渲染）和 in shouldComponentUpdate()（对于后续更新）中调用图表。另请注意，您需要一种将组件属性或状态传递给图表的方法，并且它们是特定于上下文的：在第一次渲染中，它们已经设置在this.propsand 上this.state，但在以后的更新中尚未设置新属性在组件上，因此您需要改用函数参数。
See the jsfiddle here.
请参阅此处的 jsfiddle 。
回答by ahmad chatha
React can also render the SVG elements directly. Here is an example: Ways of Integrating React.js and D3
React 也可以直接渲染 SVG 元素。这是一个例子：集成 React.js 和 D3 的方法
回答by adamwong246
You can use D3 as a utility- that is, DON'T use D3 to change the DOM. Rather, use D3 for it's scales and axis stuff, but interpolate the outputs of those D3 functions into the html/svg.
您可以将 D3 用作实用程序——也就是说，不要使用 D3 来更改 DOM。相反，使用 D3 作为它的比例和轴的东西，但是将这些 D3 函数的输出插入到 html/svg 中。
Here's an example from my project.
这是我的项目中的一个示例。
scale = d3.time.scale()
.range([ 0, 100 ])
.clamp(true)
...which is passed via props to a component...
...通过道具传递给组件...
React.DOM.rect({
x: "#{props.scale(start)}%"
width: "#{Math.abs( props.scale(end) - props.scale(start)) }%"
})
where React binds the data to the elements, rather than D3's selections.
其中 React 将数据绑定到元素，而不是 D3 的选择。
