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

Question

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

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

Answer 1

您可以通过使用缩放作为模数来将绘制的数据点数量与缩放系数相互链接。例如，假设您的缩放有 10 个级别，其中 10 级是最缩小的(Google map 中的地球)，1 级是最详细的 View (单个房屋)，并假设此函数:

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，因此不可见。

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