ノードの代わりにツリー内の枝を移動する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/