小编Mor*_*nFR的帖子

我想(有点)结合Hierarchical Edge Bundling和Radial Reingold-Tilford Tree

看起来有点像这样(原谅我糟糕的paint.net技能)*:

*孩子应该处于弧形,就像在树中一样.

我设置了这个小提琴,显示了HEB中的简单数据:https://fiddle.jshell.net/d1766z4r/2/

我已经合并了两种类型的数据(在开头的评论中,将替换当前变量"类"):

var classes = [
{"name":"test.cluster1.item1","children": [
      {"name": "test.cluster1.item4","imports":["test.cluster1.item2","test.cluster1.item3"]},
      {"name": "test.cluster1.item5"}
     ]},
{"name":"test.cluster1.item2","imports":["test.cluster1.item3"]},
{"name":"test.cluster1.item3"}
];

如果有更好的方法来组合数据,请随意更改它.

除了更改数据,我不知道如何继续,因为我是d3.js和javascript新手,特别是当它来链接正确的子项目(项目4),而不是另一个(项目5).但是,我会考虑一个答案,它将显示第1项所有子项的链接,作为开始开发此项目的方法.

如果可能的话,请更新此小提琴或制作一个新代码以备份您的代码.当然欢迎任何关于如何进行的建议.

下一步将是使用类似于可折叠树的方法让这些孩子在点击时显示或隐藏(随意给出建议,但如果我不知道如何,这可能是一个新的问题这样做,因为我将不得不处理大量数据,首先为儿童辩护.

最后,每个孩子都可以拥有自己的孩子,但现在一行孩子就足够了.我想以后我会这样做.

更新:答案不一定是完整的解决方案,每一点(看看我在那里做了什么？)有帮助!

几个月前,我尝试使用d3.js组合Hierarchical Edge Bundling和Radial Reingold-Tilford Tree

我从HEB开始尝试将它变成一棵树.事情并没有按照我想要的方式解决,我意识到从一个可折叠的径向树(不是Reingold Tilford)开始,可能会有更好的角度.

这是径向树的JSFiddle

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

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"}
            ]
        }
    ]
};

为了慢慢开始,我想将Mike Bostock 的非交互式Hierarchical边缘捆绑与当前的JSFiddle结合起来,但请记住,以后交互将成为其中的一部分.

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

我目前最大的问题是HEB没有"根",但树开始时只有一个项目.所以到目前为止我所尝试的一切都导致了树的中心一团糟.

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

var circle …

我有使用描边且无填充的边缘制成的 SVG 形状。

有没有办法增加 SVG 边框的可点击区域？

如果它只是一个形状，我可以添加一个带有描边宽度的边框以使可点击区域更大。但是，我已经在使用边框了。

在下面添加第二个更大的图层（同一“g”中的第二个“路径”但透明）也不起作用，因为存在一个选择机制，如果我们单击第二层而不是可见层，该选择机制就会中断，如下所示以及元素被重新绘制的事实（它们是图表中框之间的链接，当我实时移动框时它们会更新），并且执行此操作的代码被密封在 API 中。然而，如果这两层在某种程度上可以像只有一层一样工作，那就行了。

编辑：这是其中一种形状的示例。

<g>
    <path class="graph_edge" d="M239.25 -185.8L290.125 
        -185.8L290.125 -281L341 -281">
    </path>
</g>

就目前情况而言，如果可能的话，我宁愿不添加 id，也不能更改现有路径的任何内容。