d3 中的渲染性能答案

【问题标题】：Rendering performance in d3d3 中的渲染性能
【发布时间】：2013-12-17 10:33:51
【问题描述】：

我正在使用 d3 创建一个数据可视化程序，在尝试设置大量元素的不透明度时遇到了性能问题。

我有一个事件被调用，当用户更改一些数据时，当这个事件被触发时，我计算每个边、节点和文本节点的不透明度并相应地更改它们。

例如——

function onEvent() {
  edges.style("opacity", computeOpacity);
  edges.style("stroke", computeStroke);

  nodes.style("opacity", computeOpacity);
  textNodes.style("opacity", computeOpacity);

}

当我有很多元素（边/节点/文本节点数大于 700）时，用户体验非常缓慢和缓慢。

我检查了 chrome 时间线 - 发现有一个重新计算样式，然后是一个绘制（绘制所有“svg”元素）和 2/3 复合层。

我可以做些什么来提高我的代码的性能？每个边缘/节点/文本节点的不透明度和笔画计算非常重要，并且是非常便宜的操作 - 检查一些属性并进行简单的 Math.max 计算。

【问题讨论】：

标签： javascript performance google-chrome svg d3.js

【解决方案1】：

问题不在于实际的计算，而在于 SVG 的渲染。因此，在 D3 中您无法真正改进它。不过，您可以尝试以下一些方法。

如果您可以过滤显示的元素数量，请执行此操作。
如果特定元素的不透明度变化非常小，请不要更改它，因为它不可见。
尽可能用更简单的元素替换您的元素，尤其是直接将 paths 替换为 line。
使用 Canvas 而不是 SVG。

什么是可能的，什么是有效的取决于您的特定应用程序。

【讨论】：

你好 Lars，谢谢你的回答，我会检查清单上的第二和第三件事。在画布中渲染 d3 力布局的最简单方法是什么？
stroke-opacity 和 fill-opacity 的计算成本通常比 opacity 便宜，所以如果你可以使用它们，那可能是一个选择。
我更改了特定元素的不透明度，但我的 ui 仍然很慢，我看到我有 14k 个节点（其中 97% 是 svg）。我正在寻找像 dc.js 这样的库在画布上。
FWIW，D3 不是 SVG 特定的。它也适用于画布——唯一的“问题”是大多数示例都使用 SVG。
Lars, d3 under the hood 使用 svg 进行绘图

【解决方案2】：

如果您在 chrome 开发工具设置中打开“显示绘制矩形”，您可以看到正在重新绘制哪些部分。

使用这个我发现当我改变悬停时的笔触宽度时，它会显着减慢绘制渲染速度，奇怪的是右下角会导致整个页面重新绘制。

现在，当在悬停之前设置相同的笔划宽度时，它会加快速度。

你可能会发现一些奇怪的东西。

【讨论】：