javascript - 在 d3 树图中设置节点及其子节点的自定义 x, y 位置

我有 D3 树结构的需求。就是这个。

从上图中要理解的两件事：

井口管柱 将有多个父级（井）。
我必须能够拖放将油井连接到其他标题的链接。

我通过将 wells 和 headers 都作为 fields 的子元素来实现了这个功能。我给作为 headers 的节点增加了额外的 depth，这样它们就不会和 wells 在同一行。为了给 headers 添加多个父节点，我使用了一种方法来生成链接，并将源节点和目标节点传递给该方法，以生成多个父节点链接。如下所示。

如您所见，RK Battery 的深度已经设置，但由于它是 RK Field 的子项，它的 x 和 y 位置是相对于 RK Field 下的井的位置设置的。我想为电池设置自定义位置，并且它的子项应该能够相对于它获取 x 和 y 位置。这可能吗？

答案＃1

是的，你可以，只需赋值即可。你可以将 a d3.tree 可视化分成两部分来理解：

布局
渲染

第一部分是你使用 d3.tree 获得的实际功能，它会为你计算所有节点的布局，并为每个节点分配一个 x 和 y 位置。你可以在文档中看到提到这一点。

可视化的第二部分是渲染，在这一部分，你需要将所有已经布局好的节点根据给定的位置绘制到屏幕上。在开始这一部分之前，你可以手动将节点移动到任何你想要的位置：

// Run the layout
d3.tree(rootNode);

// Example of moving a node
rootNode.children[0].x += 10;
rootNode.children[0].y += 10;

因为你的链接数据应该看起来像这样，其中实际的数据节点本身表示源和目标，这意味着移动源或目标中的任何一个也应该使链接渲染到正确的新位置。

const links = [
    { source: {...}, target: {...} },
];