javascript - d3 中的渲染性能

Question

我正在使用 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 计算。

Answer 1

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

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

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