页面上有多个树布局，它们之间存在链接 [英] Multiple tree layouts on page, linking between them

问题描述

我正以D3的新手身份工作，并试图确定是否可以进行以下操作.

I'm working with D3 as a newcomer and trying to figure out if the following is possible.

我想要两棵可折叠的树，我在考虑画廊示例:

I want two collapsable trees, I'm thinking based the gallery example:

• 可折叠的缩进树

我想画线并在其节点和第3个对象之间建立关联.

I want to draw lines and make associations between their nodes and a 3rd object.

这是一个粗略的模型:

我目前的困惑是:

• 是否可以有两个树布局?
• 如何从树布局节点到布局外部的其他对象画线?

推荐答案

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

Yes, this is entirely possible -- you could even use the same tree layout for both if you wanted to. The fundamental thing to understand is that the tree layout is only a means of getting the coordinates for the nodes; it doesn't have anything to do with actually drawing them. So you first run the tree layout to get those coordinates and then draw the nodes in a separate step.

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

In the example you've linked to, the layout is computed at the start of the update function:

// 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 再次运行以上代码.这为您提供了两棵树的坐标，然后可以将它们附加到彼此偏移的容器元素上:

The rest of that function is only concerned with actually drawing the nodes and links. So in order to have several trees, you would run the above code again for a different root. This gives you coordinates for both trees which you can then append to container elements that are offset from each other:

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

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

Note that you don't need to change the coordinates of the nodes at all, as they will be relative to their containers. Then you can draw your center element and the links going to it. The only caveat there is that for links starting at the right tree, you would have to offset the coordinates you get from the tree layout by the amount the container element is offset.

这篇关于页面上有多个树布局，它们之间存在链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！