d3笔刷滞后具有大量不变的svg元素

时间:2019-11-20 01:15:20

标签: javascript d3.js svg

我已经使用d3建立了平行坐标图。如果您不熟悉,它看起来像这样https://bl.ocks.org/jasondavies/1341281。我正在使用d3.v5。我遇到的问题是我的图表大约有4000个<path>元素,并且每当我尝试移动或更改它时,我添加到其中的任何画笔都会出现明显的滞后。

let brush = d3.brush()
this.svg.append("g").call(brush)

为清楚起见,没有与此画笔相关的自定义事件。我没有基于画笔更改或重新呈现图表。只是大量静态<path>元素,它们的唯一联系是它们恰好与画笔位于同一svg元素中。据我所知,我没有在D3的默认笔刷渲染之上添加任何其他计算。

最后,如果我使<path>的一半不可见(显示:无,但它们仍然存在),则延迟显着减少。因此,看来笔刷的操作取决于可见的svg元素的数量。

以前有人遇到过这种行为吗? d3画笔是否可以跟踪幕后包含的svg元素之类的东西?

0 个答案:

没有答案