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

Question

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

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

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

我怎样才能做到这一点？我考虑过保留所有记录的数组，当其中一个记录发生变化时，它的高度会通过数组并更新y每个记录的位置。但这似乎是非常低效的解决方案。还有其他方法可以解决这个问题吗？

标签： javascriptd3.jssvg

Answer 1

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

链接到上面的例子

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