使用D3.js在SVG中实现可滚动记录的列表

Question

我想使用D3.js在SVG中实现可滚动记录的列表。而且我不知道一旦特定记录的高度发生变化，如何将所有记录上下移动。

这是我的意思。让我们假设我们有一个记录列表（每个记录使用嵌套的svg表示，并使用相对于根svg的位置和尺寸的百分比值进行定位）：

现在，我更新其中一条记录中的数据，以使其高度增加或减少。结果，我需要上下移动记录下方的所有记录。

我该怎么做？我考虑过保留所有记录的数组，当其中一个记录的高度改变时，遍历该数组并更新每个记录的y位置。但是，解决方案似乎效率很低。还有其他解决方法吗？

Answer 1

如果您使用的是SVG，而不是html，则可能必须实现自己的滚动解决方案。几年前，我通过在容器中保留一个项目列表来完成此操作，如果添加了新项目，则首先更新应显示的内容，然后更新这些可见项目的位置。如果y / x坐标超出范围，则将其从dom中删除，这就是我的意思：

LINK TO ABOVE EXAMPLE

另一种解决方案可能是使用SVG foreignObject并直接嵌入HTML，我想这会容易得多。