11

我想使用 D3 制作散点图，并且能够使用 x 轴上的某种滑块一次只查看一小部分。javascript中是否有一种方法可以有效地缓冲数据并在用户向左或向右滚动时快速访问元素？

我的目标类似于这里的 protovis 示例，但数据量是 10 倍。当我制作这么多数据点时，这个例子令人窒息。

4

1 回答 1

8

我已经做了一个大约 10k 点的散点图，我需要在其中以交互方式过滤绘图的各个部分。我分享了一系列对我有用的技巧，我希望有些技巧也能帮助你：

  • 为您的操作员使用一个键功能，.data()就像在本教程结束时所做的那样。使用键的好处是您不需要更新不改变的元素。
  • 与 d3 无关，但我将我的数据空间划分为一个网格，以便每个数据点与单个单元格相关联（换句话说，每个单元格都是一组点的索引）。这样，当我需要从 x_0 到 x_1 进行访问时，我知道我需要哪些单元格，因此我可以访问一组更精细的可能数据点（避免沿所有点进行迭代）。
  • 避免过渡：根据我的个人经验，.transition()选择数千个 SVG 元素时不是很流畅（现在在新版本或更快的处理器中可能会更好）
  • 在我的情况下，使点不可见（.attr("display","none")）或可见比删除和创建 SVG 元素更方便（我想知道这是否也更省时）
于 2013-01-15T16:16:32.260 回答