在D3中平移条形图时添加和删除数据

Question

我在数组中有一个大型数据集，可转换为大约一百万个6像素宽的条，

鉴于大约130个条形适合800像素的屏幕，我需要一次只显示一部分数据。然后，当用户平移图表时，将添加新数据并删除不可见数据。用户可以向右或向左平移，因此数据需要能够进入和退出图表的两侧。

我觉得解决方案涉及D3的enter和exit，但我不确定如何实现它。

我有一个想法是使用Array.prototype.concat并在平底锅上重绘。另一个想法是使用Array.prototype.slice。我希望那些足够快。

任何例子？

Answer 1

没有我知道的例子。粗略地说，您需要执行以下操作。

• 绘制初始条形图。仅传入您将显示的数据（如果您的屏幕宽度为800px，则前130个数据点）。
• 在平底锅上，获取平底锅的翻译。 x平移对应于一定数量的条。从数据数组的开头处取出这么多数据点，并将其添加到最后。
• 将新数据数组传递给D3并重绘。 This tutorial应该给你一些指示。请记住将密钥函数传递给.data()，以便它知道如何将数据与DOM元素匹配。
• 后续平底锅上的类似内容。计算出已经平移了多少个柱并相应地修改数据阵列（例如使用slice和concat - 并不重要）。重绘吧。

这个概念非常类似于我链接到的教程中所做的，除了重绘不是由计时器触发，而是由pan事件触发。

Answer 2

基本上有两种方法可以做到这一点。一个是你使用svg绘制所有1M条形图并依赖svg内置的平移。另一种是每次用户平移时绘制130条并重绘。 enter（）和exit（）对于处理自上次渲染以来进入或退出场景的集合中的数据元素非常有用。 （d3确定哪些元素是 通过在每个元素上调用谓词函数来“new”。该函数有一个默认值，但可以由用户提供。）除非你想要花哨，否则你实际上不必在这里使用它们。您可以选择上次绘制的所有rects，使用新数据选择.data（）它们，并提供绘制rects的常用调用。