简体繁体 English

D3js和React关于DOM操作

[英]D3js and React regarding DOM manipulations

原文 2015-10-18 10:56:17 7 1 javascript/ dom/ d3.js/ reactjs/ virtual-dom

How does D3 dom-manipulation mechanism influence (if any at all) on React's virtual-dom? D3 dom操纵机制如何影响React的虚拟dom（如果有的话）？

I've found many examples show that both libraries can work together great, but none of them refer to this issue.. It might not be an issue at all btw, it's just a big question that I raised, but couldn't find an answer for. 我发现许多示例表明两个库可以很好地协同工作，但是它们都没有涉及到这个问题。顺便说一句，这可能根本不是问题，这只是我提出的一个大问题，但是找不到回答。

EDIT: 编辑：

I've just learned that only when "writing" to the virtual-dom, the dom get's updated. 我刚刚了解到，只有在“写入”虚拟dom时，dom get才会更新。 and ALWAYS when "reading" from the actual "reading" is done on the virtual-dom. 并且总是在虚拟域上进行从实际“读取”中的“读取”时。

So when I use D3 to update the DOM directly, the virtual-dom has no idea about it, and I won't be able to read the new changes from the virtual-dom. 因此，当我使用D3直接更新DOM时，虚拟dom对此一无所知，并且我将无法从虚拟dom中读取新的更改。 That's what I was afraid of, and now I wonder how React's helping me when I have to use D3? 这就是我所担心的，现在我想知道当我不得不使用D3时React如何帮助我吗？

1 个解决方案

You follow the rules of each when interacting with them. 与它们进行交互时，请遵循每个规则。 With regard to react, you wrap the d3 dom manipulation in a component, and that's it. 关于反应，您将d3 dom操作包装在组件中，仅此而已。

Depending on the components you use, you can either have components that do everything in d3, or write some primitives which allow you to use react components instead of low level d3. 根据所使用的组件，您可以在d3中拥有可以执行所有操作的组件，也可以编写一些原语以允许您使用react组件而不是底层d3。