Question

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

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

例如 -

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

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

}

当我有很多元素（边/节点/文本节点数大于700）时，UX非常缓慢而且很慢。

我检查了镀铬时间轴 - 并看到有一个重新计算的样式，然后是一个油漆（绘制所有“svg”元素）和2/3复合图层。

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

Answer 1

问题不是实际的计算，而是SVG的渲染。因此，在D3中你无法真正做到改善它。但是，您可以尝试以下几种方法。

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

什么是可行的，什么有用将取决于您的特定应用。

Answer 2

如果在chrome dev工具设置中打开“show paint rectangles”，则可以看到正在重新绘制哪些部分。

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

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

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

在d3中渲染性能

2 个答案: