javascript - 如何更改气泡图中某个元素的位置

Question

我正在尝试通过交互在 D3.js 中实现气泡图：选择一个气泡会使其移动到图表的中心，增加大小并显示附加信息。

d3-hierarchy 具有d3.pack布局，非常适合制作气泡图。我可以更新数据以增加选择中圆圈的大小。但是，我看不到任何方法可以在布局中设置一个圆圈的位置并让其他圆圈围绕它进行排列。我需要类似“给定（x，y）处的圆圈，围绕它创建一个气泡图”，而这在 d3.pack 中不存在。

d3-force 也可以用来制作气泡图。如果我使用 d3.drag 添加一些类似于此示例的交互，我可以使一个圆圈向中心移动，如下所示：

function dragstarted(event) {
    const interX = d3.interpolate(event.x, dimensions.width / 2);
    const interY = d3.interpolate(event.y, dimensions.height / 2);

    if (!event.active) simulation.alphaTarget(0.3).restart();

    (function toCenter(i) {
      setTimeout(function() {
        event.subject.fx = interX(i / 100);
        event.subject.fy = interY(i / 100);

        i++;
        if (i < 100) {
          toCenter(i);
        } else {
          event.subject.fx = null;
          event.subject.fy = null;
        }
      }, 1)
    })(1);
  }

这是唯一一种有效的方法——它将圆圈移动到中心，但它会通过几个刻度来传递力，因此圆圈可能实际上不会到达图表的中心。此外，与更新数据不同，当用户想要关闭展开的圈子时，我不知道如何将圈子重置为其原始位置。

我的问题是，如何让气泡图中的圆圈移动到中心并让其他圆圈重新排列？是否可以对 d3.pack 或 d3.force 进行一些更改，或者我应该尝试不同的方法？另一个图书馆，甚至？

标签： javascriptsvgd3.js