有什么正确的方法来整合d3.js图形到Facebook React应用程序？ [英] Is there any proper way to integrate d3.js graphics into Facebook React application?

问题描述

是的，我知道有反应艺术，但似乎坏了。

Yes, I know there is react-art, but it seems to be broken.

问题是，d3.js是关于改变浏览器的DOM，直接使用它，如在componentDidMount方法里面，将无法正常工作，因为所有对浏览器DOM的更改不会反映在React的虚拟DOM中。任何想法？

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?

推荐答案

一个策略可能是构建一个你从不让React更新的黑盒组件。组件生命周期方法 shouldComponentUpdate（）旨在允许组件自己确定是否需要重新布局。如果你总是从这个方法返回 false ，React将不会潜入子元素（也就是说，除非你调用 forceUpdate （）），因此这将作为一种防火墙来防止React的深度更新系统。

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 always return false from 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.

使用第一次调用 render（）生成图表的容器，然后在 componentDidMount（）方法中使用D3绘制图表本身。然后它只是为了响应React组件的更新而更新您的图表。虽然你可能不会在 shouldComponentUpdate（）中做这样的事情，但我没有看到真正的原因，你不能继续前进，调用D3从中更新（请参阅React组件的 _performUpdateIfNecessary（） ）。

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 supposed to 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()).

所以你的组件看起来像这样：

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;
    }
});

方法（对于第一个渲染）以及 shouldComponentUpdate（）（用于后续更新）。还要注意，你需要一种方法来传递组件属性或状态到图表，并且它们是上下文特定的：在第一个渲染中，它们已经设置在 this.props 和 this.state ，但是在以后的更新中，新的属性还没有在组件上设置，所以你需要使用函数参数。

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.props and 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.

请参阅jsfiddle 此处。

See the jsfiddle here.

这篇关于有什么正确的方法来整合d3.js图形到Facebook React应用程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！