在D3中平移条形图时添加和删除数据 [英] Add and remove data when panning bar chart in D3

问题描述

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

I have a large dataset in an array which translates into about a million 6-pixel wide bars,

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

Given that about 130 bars fit into 800 pixels of screen, I need to only display a portion of the data at a time. Then, when the user pans the chart, new data will be added and non-visible data will be removed. The user could pan right or left so data need to be able to enter and exit from both sides of the chart.

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

I feel like the solution involves D3's enter and exit, but I'm unsure how to implement it.

我遇到的一个想法是使用Array.prototype.concat并在平底锅上重画.另一个想法是使用Array.prototype.slice.我希望这些足够快.

One idea I've had is to use Array.prototype.concat and redraw on pan. Another idea would be to use Array.prototype.slice. I hope those are fast enough.

有什么例子吗?

推荐答案

我没有发现任何示例.粗略地讲，您需要执行以下操作.

There are no examples that I'm aware of. Roughly, you would need to do the following.

• 绘制初始条形图.仅传递您将要显示的数据(即，如果您的屏幕为800像素宽，则前130个数据点).
• 在平底锅上，获取平底锅的翻译. x平移对应于一定数量的条.从数据数组的开头删除这许多数据点，然后将其添加到结尾.
• 将该新数据数组传递给D3并重新绘制. 本教程应该为您提供一些指导.请记住，将键函数传递给.data()，以便它知道如何将数据与DOM元素进行匹配.
• 在随后的平底锅上也发生了类似的事情.找出已平移了多少条并相应地修改数据数组(例如，使用slice和concat没关系).重新绘制条形图.

• Draw the initial bar chart. Pass in only the data you'll display (i.e. the first 130 data points if your screen is 800px wide).
• On pan, get the translation for the pan. The x translation corresponds to a certain number of bars. Take off this many data points from the beginning of your data array and add that many to the end.
• Pass that new data array to D3 and redraw. This tutorial should give you some pointers. Remember to pass a key function to .data() so it knows how to match data to DOM elements.
• Similar thing on subsequent pans. Figure out how many bars have been panned and modify the data array accordingly (e.g. using slice and concat -- doesn't matter that much). Redraw the bars.

这个概念与我所链接的教程非常相似，除了重绘不是由计时器触发，而是由pan事件触发的.

The concept is very similar to what's done in the tutorial I've linked to, except that the redraw isn't triggered by a timer, but by the pan event.

这篇关于在D3中平移条形图时添加和删除数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！