javascript - D3 强制布局移动树中的分支而不是节点

Question

我有一棵树和叶子之间的附加链接。我想对这些节点应用力布局，以便分支被迫靠近在一起。不是单独的节点(应保留树布局)。

因此，对于下图，我希望从 7 和 4 开始的分支交换位置，以便节点 5 和 0 变得更接近。到目前为止，我只将单独的节点移动到一起。请参阅下面的另一张图片。

这里是jsfiddle link您能否建议使用强制布局更改分支位置的最佳方法？

我仅在某些节点上应用了强制布局:

// assign special type on creation/////////////////////////////////////
var ind1 = 0;
var ind2 = 5;
nodes.forEach(function(d, i) {
  if (i ==  ind1 || i == ind2) {
    d.dataType = 'special';
  } else {
    d.dataType = 'none';
  }
}
)
// draw path between special nodes/////////////////////////////////////
var nodeS = nodes[ind1];
    var nodeT = nodes[ind2];
    var newLink = {source: nodeS, target: nodeT};
    specialLinks.push(newLink);
    nodesSelected.push(nodeS);
    nodesSelected.push(nodeT);

    linkSel = svg.selectAll('path.linkExtra').data(specialLinks);
    nodeSel = svg.selectAll('g.node').filter(function(d,i){
      return d3.select(this).attr('data-type') == 'special';
    })

    linkSel.enter().append('path')
        .attr('class', 'linkExtra')
        .attr('d', d3.svg.diagonal().projection(function(d) {
          return [d.y, d.x];
        }));

// create force layout/////////////////////////////////////
var force = d3.layout.force()
  .gravity(0)
  .charge(20)
  .linkDistance(100)
  .linkStrength(1)
  .size([500, 500]);



 // main function to apply forces/////////////////////////////////////
     function inittForce() { 
    force
        .nodes(nodesSelected)
        .links(specialLinks)
         .start();


    force.on('tick', function(e) {

      linkSel.attr('x1', function(d) { return d.source.x; })
          .attr('y1', function(d) { return d.source.y; })
          .attr('x2', function(d) { return d.target.x; })
          .attr('y2', function(d) { return d.target.y; });

      nodeSel.attr('cx', function(d, i) {return  d.x;})
          .attr('cy', function(d) { return d.y; });

      svg.selectAll('*').remove();
      drawTree();
      drawPath();
    });
  }

Answer 1

我认为强制布局与层次结构布局在这里不起作用。

我希望以编程方式预处理数据，以便发送到分层布局的数据根据​​其连接性进行排序。对于您的示例，我交换了几个 treeData 数组元素以获得效果。

http://jsfiddle.net/1ahutwvp/39/