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

标签 svg d3.js reactjs dc.js

我正在使用 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 吗?

最佳答案

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

这将允许生成 SVG。

关于svg - 如何使用 d3 生成 svg 客户端而不将其附加到 DOM(与 React.js 一起使用),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24500071/

相关文章:

javascript - 如何获得比节点间最短路径更多的路径?

d3.js - 无法使 d3 map 正确居中

events - React.js : Can't "return false" anymore . ..有等效的吗?

xml - 使用xpath在svg下找到第n个 child

javascript - 获取 Svg 中字符串的像素长度

html - 在 SVG 中的蒙版上放置轮廓

android - SVG 文件在 Emulator 中运行良好但在 Real Device 中出错?

d3.js - d3.js 中力图链接上的节点

javascript - ReactJS无法读取未定义的属性 'forEach'

javascript - 删除受控文本字段中的所有文本后,如何使受控文本字段再次为空? SPFX React/TypeScript