如何使用d3生成svg客户端而不将其附加到DOM（使用with React.js）

我正在使用React.js构建一个应用程序，其中包括许多svg图表。我正在使用d3函数来帮助创建图表，比如scales，但随后使用React来生成svg元素。以下是一篇关于该方法的精彩文章：

我走这条路的部分原因是为了性能——第一个版本的应用程序太慢了。它有很多元素和很多用户交互，都是客户端的。我试图在React中基本上重新创建dc.js库

这是一个非常有趣的方法和直观的（比d3更简单）。不过，构建轴很乏味，d3做得很好。我希望d3能够输出一个表示轴的svg元素字符串（可能还有其他元素），并将其输入到DOM中

我确实看到了这个问题（），答案是将它附加到DOM中并删除它，或者创建一个DOM片段。这些方法与React方法背道而驰，可能会否定React的性能优势。我还看到了jsdom和phantomjs解决方案，它们在我的案例中不起作用

---

d3可以生成svg而不将其附加到DOM中吗

D3通过其选择直接在DOM上运行。要让它在不修改DOM的情况下生成字符串表示，您需要修改它的源代码（这将是一个非常重要的修改）。

@Lars是正确的，如果您使用的是传统方法。但是，对于“”这是绝对可能的。这个库可以模拟DOM，还允许字符串输入。这意味着您可以将根元素注入到伪DOM中，并获得一个新的window元素进行操作。然后，您可以使用D3，而无需更改其源代码，使用它就像正常情况一样

---

这将允许生成SVG。

好的，谢谢。helper（非DOM操作）函数对我正在做的工作仍然非常有用。您可以通过在不将DOM放在页面上的情况下操作DOM（即不渲染到页面）来获得提升。dc很乐意在一个断开连接的div上工作。我不知道这是否是一个足够的提升。戈登，这很有趣。我已经和dc.js一起工作了一段时间，不知道这件事。你有没有举个例子？（顺便说一句，谢谢你最近在dc.js上做的所有工作）嗨。我知道这是很久以前的事了，但我已经为D3构建了一个插件，允许你渲染D3->React元素。D3从不改变DOM，渲染函数不需要状态@尼亚胡，也值得一提。您可以使用jsdom为D3提供一个元素，并在服务器端呈现内容。所以D3React应该给你同构的d3@Olical嘿，谢谢：），我一定会看看你的插件…看看这里：，我猜这就是你的想法？在服务器上生成它是一种选择。我决定在React中编写SVG标记。这相当简单（请参见此处：）。最难的部分是生成疯狂的SVG路径属性。幸运的是，d3为这些功能提供了独立的功能。例如d3.svg.area（）和d3.svg.line（）。然后我将生成的区域或线字符串传递到path属性中。它工作得很好。