javascript - D3.js 在径向树中添加元素之间的链接(分层边缘捆绑元素)

Question

几个月前，我尝试了 combining Hierarchical Edge Bundling and Radial Reingold–Tilford Tree using d3.js

我从HEB开始，试图把它做成一棵树。 事情并没有按照我想要的方式发展，我意识到从可折叠的放射状树开始(不是 Reingold Tilford)可能会更好， Angular 不同。

Here is a JSFiddle of the radial tree

数据模型也发生了变化，因为元素现在有了名称、子元素和导入(链接)。

var flare =
{
    "name": "root",
    "children": [
        {
            "name": "test1.parent1","children": [
                {"name": "test1.child11","children": [
                    {"name": "test1.child111"},
                    {"name": "test1.child112"}
                ]}
            ],"imports": ["test2.parent2","test3.parent3","test4.parent4"]
        },
        {
            "name": "test2.parent2","children": [
                {"name": "test2.child21"},
                {"name": "test2.child22"},
                {"name": "test2.child28","children":[
                    {"name": "test2.child281"},
                    {"name": "test2.child282"}
                ]}
            ],"imports": ["test3.parent3"]
        },
        {"name": "test3.parent3","imports": ["test4.parent4"]},
        {
            "name": "test4.parent4","children": [
                {"name": "test4.child41"},
                {"name": "test4.child42"}
            ]
        }
    ]
};

要慢慢开始，我想结合non-interactive Hierarchical edge bundling来自 Mike Bostock 与当前 JSFiddle ，但请记住，互动将在稍后成为其中的一部分。

此外，只有第一层必须有链接(父-父链接)，如下所示(我想要的结果):

我目前最大的问题是 HEB 没有“根”，但树从单个元素开始。所以到目前为止，我所做的一切都导致树的中心一团糟。

请注意，树的中心有一个圆圈，用于覆盖根到 1 级的链接，因此树从 1 级(父级)开始。

var circle = svg.append("circle")
  .attr("cx", 0)
  .attr("cy", 0)
  .attr("r", diameter - 725.3)
  .style("fill", "#F3F5F6")
  .style("stroke-width", 0.2)
  .style("stroke", "black");

理想情况下，父级之间的链接必须在关卡折叠(未)折叠时更新，就像节点和关卡之间的链接一样，但这可以稍后进行，并且在最初获得第一级后可能并不那么困难显示的链接。此外，数据模板可能会根据需要更改，但所有 3 条信息都很重要(名称、 child 和导入)。

另一种方法是能够将数据更改为不包括根部分，并且它的行为与现在完全一样 也欢迎部分回答。

Answer 1

My current biggest issue is that the HEB has no "root", but the tree starts with a single item. So everything I have tried so far has led to a big mess at the center of the tree.

既然你有一个根，为什么不把它设置为中心“节点”并使它成为一个径向树，比如 this ？ Here是另一个例子，但有多个根。

也就是说，您没有要求径向树，即使这听起来可以回答您的问题。如果你决心把东西排列成不同镭的圆圈，也许要解决的问题就是那些看起来如此“凌乱”的线条纵横交错。如果是这种情况，那么不同的排序算法可能会起作用。 Here是一篇扩展了在 D3.js 的类似场景中使用不同排序算法的文章。 D3布局算法也是open source online .

我能为您找到的最佳资源是 this Stack Mathematics Answer .其中有几点对我来说特别突出:

1. 您的连接/分支可能一团糟，但如果它是交互式的，并且当您将鼠标悬停在特定节点上时进出特定节点的分支会亮起，那么它仍然可以是一个可读/可用的图形。
2. 您可以尝试不同的排序算法，直到找到适合您的数据的算法。
3. 圆圈内可以有一个或多个节点，在这种情况下，将根节点放在中间可能很有意义。

这不是一个实际可用的答案，因为它在 Mathematica 中，但我认为它对基础理论和技术的解释很有用。

如果您不想将树的根放在中央，可能更艺术化的方法是使从父级到根父级的所有分支都是半透明的，并且可能是不同的颜色。

希望这对您有所帮助!