无需使用d3.js重新渲染数据的无限滚动条形图[关闭]

Posted 2021-03-30

我正在构建一个动态滚动条形图，其中包含以下必需行为：

1. 图表的初始视图应包含来自完整数据的指定（常量）观察量，下面带有滚动条。
2. 滚动到几乎结束时，一些新数据应自动包含在图表中而无需重新渲染。换句话说，应该将新数据添加到图表中，而不是在整个数据上重新绘制图表
3. 此过程应继续进一步滚动，给人一种无限滚动条形图的感觉。
4. y轴刻度应在整个过程中保持不变。

我对d3.js相当新，并且对如何构建滚动条形图和构建无限滚动列表（使用jquery）有基本的了解。但是我无法弄清楚如何：

1. 如何更新与新加载数据对齐的x轴刻度。
2. 请问d3.js对此有效（考虑到我需要输入~10-100k数据点）还是有更好的解决方案？

此外，欢迎任何展示上述功能的现有项目/演示。

答案

将新数据添加到图表中，而无需再次重新呈现整个数据

这在d3中很容易做到。例如，见bar chart

如何更新与新加载数据对齐的x轴刻度。

在上面的示例中，x轴自动更新。

这部分的技巧是一旦到达底部就触发滚动事件。

请问d3.js对此有效（考虑到我需要在滚动时输入大量数据）还是有更好的解决方案？

浏览器的限制多于d3.js.我不知道你认为“大量数据”有多少，所以我无法帮助你。