在D3.js中动态减少数据

Question

我正在使用D3渲染SVG，以显示JSON数据中的圆圈。 我想支持缩放和拖动。 JSON结构会变得非常大。 这是我的主要问题：

• 为所有JSON条目添加圆圈实际上并没有用。 页面变得太慢了，因为DOM中可能有成千上万的<circle>元素。

我如何解决它：

• 我保留了在拖动功能中更新的数据集的精简副本。 在每个拖动事件中，我声明一个空数据集：

var reducedData = [];

我遍历整个数据集，仅将具有中心坐标的圆（在当前轴下可见）推入reducedData 。 然后，我擦除SVG并使用reducedData重绘它。 对于每个缩放事件，我都执行相同的过程，只是在给定当前缩放比例的情况下，将半径大于5个像素的圆附加到reducedData上。

尽管页面的响应速度非常快，并且看起来运行良好，但是效率非常低，我相信这不是实现此目的的最佳方法。 有什么替代方案可以解决我的问题？ 谢谢。

Answer 1

当然，总会有改进的余地，但是我认为您的方法已经足够好，可能没有比这更好的了。 但是，如果您愿意，这里有一些要点供您自己考虑和/或测试...

首先，我建议您检查是否确实需要任何优化。 在最新版本的Google Chrome浏览器中，可以在其“性能”标签下的DevTools中使用CPU调节来模拟速度较慢的设备。 然后，使用时间轴工具 ，您可以验证数据减少或DOM操作是否引起任何瓶颈并降低帧速率。 如果没有，不要流汗，你很好。

如果从分析中发现数据减少正在减慢渲染速度，则可以使用时间轴工具准确找出缓慢的位置并研究更快的替代方法。

另一方面，如果是由DOM操作引起的麻烦，请确保使用的是常规更新模式 ，以确保仅在真正需要时才创建或删除元素。 此外，您可以通过复制圈子而不是创建新圈子来加快圈子的创建。

通常，当需要可视化太多数据项时，作为最后的选择，我们从SVG切换到基于画布的可视化，但是我认为这对于您的上下文而言是过大的。

希望对您有所帮助，如有任何问题，请告诉我们。

Answer 2

我最终使用Crossfilter.js来快速过滤数据。 这样，我无需手动保留数据集的精简副本。 我可以简单地在每次拖动和缩放事件时对其进行快速过滤。 谢谢大家的回答。

Answer 3

我解决此问题的方法是仅在用户平移/缩放时更新可见的svg元素。

function pointInDomain(d, domain) {
    return d.x < domain[1] && d.x > domain[0]
}

function zoomed() {
  xz = d3.event.transform.rescaleX(x);
  xGroup.call(xAxis.scale(xz));

  var domain = xz.domain();

  clippedArea.selectAll("circle")
    .style("visibility", d => pointInDomain(d, domain) ? "visible" : "hidden")
    .filter(d => pointInDomain(d, domain))
    .attr("cx", d => xz(d.x));
}

JSFiddle