svg - 如何使用 d3 生成 svg 客户端而不将其附加到 DOM(与 React.js 一起使用)

Question

我正在使用 React.js 构建一个应用程序，其中包含相当多的 svg 图表。我使用 d3 函数来帮助创建图表，例如比例尺，然后使用 React 生成 svg 元素。这是关于该方法的精彩文章:http://10consulting.com/2014/02/19/d3-plus-reactjs-for-charting/

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

这是一种非常有趣且直观的方法(在我看来，比单独的 d3 更有效)。虽然构建轴很乏味，但 d3 做得很好。我希望 d3 能够输出代表轴(可能还有其他元素)的 svg 元素字符串，然后将其提供给 React 以包含在 DOM 中。

我确实看到了这个问题( How to make d3.js generate an svg without drawing it? )，答案是将其附加到 DOM 中并删除它，或者创建一个 DOM 片段。这些方法与 React 方法背道而驰，并且可能会抵消 React 的性能优势。我还看到了 jsdom 和 phantomjs 解决方案，但它们不适用于我的情况。

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

Answer 1

如果您使用传统方式，@Lars 是正确的。然而，这绝对可以通过 ' jsdom 实现。 '。该库可以模拟 DOM，还允许字符串输入。这意味着您可以将根元素注入(inject)到假 DOM 中并获取一个新的窗口元素来操作。然后您就可以使用 D3，而无需更改其源代码，并且使用就像正常一样。

这将允许生成 SVG。