页面上的多个树布局，在它们之间进行链接

Question

我正在与D3一起作为新手，并试图弄清楚以下是否可行。

我想要两个可折叠的树，我正在思考基于画廊的例子：

• Collapsible Indented Tree

我想在他们的节点和第三个对象之间绘制线条并建立关联。

这是一个粗略的模型：

我此时的困惑是：

• 是否可以有两个树形布局？
• 如何从树状布局节点中绘制线条到布局外的其他对象？

Answer 1

是的，这完全有可能 - 如果你愿意，你甚至可以为两者使用相同的树形布局。要理解的基本要素是树布局只是获取节点坐标的一种方法;它与实际绘制它们没有任何关系。因此，首先运行树布局以获取这些坐标，然后在单独的步骤中绘制节点。

在您链接到的示例中，布局是在update函数的开头计算的：

// Compute the flattened node list. TODO use d3.layout.hierarchy.
var nodes = tree.nodes(root);

// Compute the "layout".
nodes.forEach(function(n, i) {
  n.x = i * barHeight;
});

该功能的其余部分仅涉及实际绘制节点和链接。因此，为了拥有多个树，您将再次为不同的root运行上述代码。这为您提供了两个树的坐标，然后您可以将这些树附加到彼此偏移的容器元素：

var tree1 = svg.append("g");
var tree2 = svg.append("g").attr("transform", "translate(500,0)");

请注意，您根本不需要更改节点的坐标，因为它们将相对于其容器。然后你可以绘制你的中心元素和链接到它。唯一需要注意的是，对于从右侧树开始的链接，您必须使用容器元素偏移的量来偏移从树布局获得的坐标。