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

Question

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

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

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

我该怎么做？我考虑保留所有记录的数组，当其中一个记录更改其高度时，将通过数组并更新每个记录的y 位置。但这似乎是非常低效的解决方案。还有其他方法可以解决这个问题吗？

Answer 1

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

LINK TO ABOVE EXAMPLE

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