在 d3 树图中设置节点的自定义 x、y 位置及其 children

Question

我有d3树结构要求。这个。

从上图可以看出两点：

Headers 将有多个 parents(wells).
我必须能够拖放连接 wells 和 [= 的 links 57=] 到其他 headers.

我通过将 wells 和 headers 作为 children 添加到字段。我已经给 headers 的节点额外的 depth ，这样它们就不会像井一样在同一条线上。要将多个 parent 添加到 headers，我正在使用一种方法来生成链接并将源节点和目标节点传递给该方法，以生成多个 parent 链接。像这样。

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

Answer 1

是的，您可以，只需分配值即可。您可以将 d3.tree 可视化分成两部分以便于理解：

布局
渲染

第一部分是您通过使用 d3.tree 获得的实际功能，它为您计算所有节点的布局并将 x 和 y 位置分配给每个。您可以在 docs.

中看到这一点

可视化的第二部分是渲染，您可以在其中获取所有已布置的节点，并使用给定的位置将它们绘制在屏幕上。在开始这部分之前，您可以手动将节点移动到任何您想要的位置：

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

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

因为您的 link 数据应该是这样的，实际数据节点本身代表源和目标，这意味着移动源或目标也应该导致 link 渲染到正确的新位置。

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

在 d3 树图中设置节点的自定义 x、y 位置及其 children

Set custom x, y position of nodes and their children in d3 tree diagram

javascript

hierarchy

d3.js

typescript