D3.js在放射状树中的元素之间添加链接(分层边缘捆绑元素)

问题描述

几个月前，我尝试了

我从HEB开始尝试将其变成一棵树.事情并没有按照我想要的方式解决，我意识到，从一个可折叠的放射状树(不是Reingold Tilford)开始，最好换个角度.

I started from the HEB and tried to make it into a tree.Things have not worked out the way I wanted, and I realized it might be better to start from a collapsible radial tree (not Reingold Tilford), with a different angle.

这是放射状树的JSFiddle

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

The data model has also changed, as elements now have a name, children and imports (links).

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和当前的 JSFiddle ，但请记住，交互将在以后进行

To start slowly, I would like to combine the non-interactive Hierarchical edge bundling from Mike Bostock with the current JSFiddle, but keeping in mind that the interactions will be part of it later on.

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

Also, only the first level has to have links (parent-parent link) as shown below (the result that I want):

我当前最大的问题是HEB没有根"，但树以单个项目开头.因此，到目前为止，我尝试过的所有操作都导致树中心的混乱.

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.

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

Note that there is a circle at the center of the tree to cover the root to level 1 links, so the tree starts at level 1 (parents).

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条信息都很重要(名称，子级和导入项).

Ideally, the links between parents have to update when a level is (un)collapsed, like it does for the nodes and the links between levels, but that can come later and might not be that difficult after initially getting the first level links to show. Also, the data template might change if necessary, but all 3 pieces of information are important (name, children and imports).

执行此操作的另一种方法是能够更改数据以不包括根部分，并且其行为与现在完全相同也欢迎提供部分答案.

Another way to do this would be to be able to change the data to not include the root part, and that it behaves exactly as it does nowPartial answers are also welcome.

推荐答案

我设法使用Mike Bostock在原始层次化边缘捆绑中找到的部分代码在此JSFiddle中的元素之间添加了链接，并将其添加到了可折叠的树.但是，它们在折叠或展开孩子时不会更新！

I have managed to add links between elements in this JSFiddle using parts of the code found in the original hierarchical edge bundling by Mike Bostock and added them to radial version of the collapsible tree. However, they do not update when collapsing or expanding children!

var bundle = d3.layout.bundle();

var line = d3.svg.line.radial()
    .interpolate("bundle")
    .tension(.85)
    .radius(function(d) { return d.y; })
    .angle(function(d) { return d.x / 180 * Math.PI; });

然后在update(source)中输入:

var middleLinks = packageImports(root);

svg.selectAll("path.middleLink")
          .data(bundle(middleLinks))
        .enter().append("path")
          .attr("class", "middleLink")
          .attr("d", line);

"packageImport"功能可在底部找到.

The "packageImport" function can be found at the bottom.

function packageImports(json) {
      var map = {},
          imports = [];

      console.log(json.children);

      // Compute a map from name to node.
      json.children.forEach(function(d) {
        console.log(d.name)
        map[d.name] = d;
      });

      // For each import, construct a link from the source to target node.
      json.children.forEach(function(d) {
        if (d.imports) d.imports.forEach(function(i) {
          imports.push({source: map[d.name], target: map[i]});
        });
      });

      console.log(imports);
      return imports;
    }

这篇关于D3.js在放射状树中的元素之间添加链接(分层边缘捆绑元素)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！