如何在放大时在D3.js上绘制更多数据点？

Question

我正在使用D3.js开发一些图表，我面临一些问题，因为我还不熟悉框架。

我的主要要求是绘制价格X时间的图表，我的数据点可能在一天内超过一百万个数据点。所以我的想法是使用类似谷歌地图的方法。每次放大时，地图都会从服务器获取更多数据并显示它。我会采取相同的方法，通过几个点绘制图表，当你放大我会采取更多的点，使图表更清晰。如何归档此解决方案？

Answer 1

您可以使用缩放作为模数将绘制的数据点数与缩放系数相互链接。例如，我们假设您的缩放有10个级别，其中10个缩小最多（Google地图中的地球）和1个最详细的视图（单个房屋）并假设此功能：

var scatter = d3.select("#svg").selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cy", function(d) {
    return y(d.y);
  })
  .attr("cx", function(d) {
    return x(d.x);
  })
  .attr("r", function(d, i) {
    return i % zoom == 0 ? 3 : 0; // <== This is _the_ line.
  });

标记的线条遍历数据点，并且只有当i % zoom == 0绘制的圆的半径为3时，所有其他圆圈才会为0，因此不可见。

当然，这仍然可以通过所有可用的数据点，但我认为在d3中有类似.defined()的内容，以避免绘制数据点。可以在那里使用与上面相同的功能。