1

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

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

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

这是一个粗略的模型：

小样

在这一点上我的困惑是：

  • 是否可以存在两个树布局？
  • 如何从树布局节点绘制线条到布局之外的其他对象？
4

1 回答 1

4

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

在您链接到的示例中，布局是在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)");

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

于 2013-11-15T09:21:26.617 回答