页面上的多个树布局，它们之间的链接答案

【问题标题】：Multiple tree layouts on page, linking between them页面上的多个树布局，它们之间的链接
【发布时间】：2013-11-28 10:47:09
【问题描述】：

我作为新人与 D3 合作，并试图弄清楚以下是否可行。

我想要两棵可折叠的树，我正在考虑基于画廊示例：

Collapsible Indented Tree

我想画线并在它们的节点和第三个对象之间建立关联。

这是一个粗略的模型：

此时我的困惑是：

是否可以存在两种树布局？
如何从树布局节点向布局外的其他对象绘制线条？

【问题讨论】：

标签： d3.js hierarchy

【解决方案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)");

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

【讨论】：