D3.packでトランジション後にサークルが重複する

Question

d3.nest（）関数を使用して再編成したJSONファイルがあります。これを使用して別の状態に移行します。

しかし、私がトランジションを行うと、トップ階層のサークルはどのような方法でも重なり、その動きはあまりエレガントではありません（彼らは現れていて、私たちはどこでも消えています）。別の質問では推奨されていたように、moveToFront（）関数を使用してトップノードを最上位に保ちました。これは上位のノードには効果的ですが、すべてのレイヤーで機能するわけではありません。サークルを半透明にして、何が起こっているのかをより簡単に確認できます。

私もラベルを追加しようとしていますが、私がやっているように見えますが、それは完全にうんざりです。オーダーが乱れていると思っていますか？

ここに問題の機能のための私のコードです。また、私が使用している3つの階層を表すJSONファイルサンプルを3つ入れました。

誰かが助けることができれば、それは非常に感謝しています！

function update(i, duration) { 
    var delay = 0; 

    var root = changehierarchy(childdata, i); 
    var focus = root; 
    var nodes = pack.nodes(root); 
    var v = [root.x, root.y, root.r * 2 + margin]; 
    var k = diameter/v[2]; view = v; 


    var vis = svg.selectAll('circle') 
    .data(nodes, function(d) { return d.name; }); 


     //.sort(function (a, b) { return a.depth < b.depth ? -1 : 1; }) 
     // update 
     vis.data(nodes) 
      .transition() 
      .each("start", function(d){ d3.select(this).moveToFront(); }) 
      .duration(duration) 
      .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; }) 
      .attr('transform', function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; }) 
      .style("fill", function(d) { return d.children ? color(d.depth) : d.color; }) 
      .style("opacity", function(d) { return d.children ? 0.4 : 1; }) 
      .attr('r', function(d) { return d.r; }); 

     //enter 
     vis.data(nodes) 
      .enter() 
      .append('circle') 
      .attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; }) 
      .attr("r", function(d) { return d.r * k; }) 
      .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; }) 
      .style("fill", function(d) { return d.children ? color(d.depth) : d.color; }) 
      .style("opacity", function(d) { return d.children ? 0.4 : 1; }); 

     //exit  
     vis.exit() 
      .transition() 
      .duration(duration) 
      .style('opacity', 0) 
      .remove(); 

     var node = svg.selectAll("circle,text"); 

     d3.select("body") 
      .style("background", color(-1)); 

     d3.selection.prototype.moveToFront = function() { 
      return this.each(function(){ 
       this.parentNode.appendChild(this); 
      }); 

     d3.selection.prototype.appendText = function() { 
      var text = svg.selectAll("text") 
       .data(nodes, function(d) { return d.name; }); 
       text.enter().append("text") 
        .attr("class", "label") 
        .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; }) 
        .style("display", function(d) { return d.parent === root ? "inline" : "none"; }) 
        .text(function(d) { return d.name; }); 
     }; 
}; 

JSONファイル： まず階層

{ 
    "name":"POPULATION (n=8)", 
    "children":[ 
     { 
     "name":1, 
     "name1":"Total", 
     "name2":"POPULATION (n=8)", 
     "eventA":"Event A is true", 
     "eventB":"Event B is true", 
     "color":"#944dff", 
     "size":50 
     }, 
     { 
     "name":2, 
     "name1":"Total", 
     "name2":"POPULATION (n=8)", 
     "eventA":"Event A is true", 
     "eventB":"Event B is true", 
     "color":"#944dff", 
     "size":49 
     }, 
     { 
     "name":3, 
     "name1":"Total", 
     "name2":"POPULATION (n=8)", 
     "eventA":"Event A is true", 
     "eventB":"Event B is false", 
     "color":"#944dff", 
     "size":48 
     }, 
     { 
     "name":4, 
     "name1":"Total", 
     "name2":"POPULATION (n=8)", 
     "eventA":"Event A is true", 
     "eventB":"Event B is false", 
     "color":"#944dff", 
     "size":47 
     }, 
     { 
     "name":5, 
     "name1":"Total", 
     "name2":"POPULATION (n=8)", 
     "eventA":"Event A is false", 
     "eventB":"Event B is true", 
     "color":"#FFFFFF", 
     "size":46 
     }, 
     { 
     "name":6, 
     "name1":"Total", 
     "name2":"POPULATION (n=8)", 
     "eventA":"Event A is false", 
     "eventB":"Event B is true", 
     "color":"#FFFFFF", 
     "size":45 
     }, 
     { 
     "name":7, 
     "name1":"Total", 
     "name2":"POPULATION (n=8)", 
     "eventA":"Event A is false", 
     "eventB":"Event B is false", 
     "color":"#FFFFFF", 
     "size":44 
     }, 
     { 
     "name":8, 
     "name1":"Total", 
     "name2":"POPULATION (n=8)", 
     "eventA":"Event A is false", 
     "eventB":"Event B is false", 
     "color":"#FFFFFF", 
     "size":43 
     } 
    ] 
} 

第二階層

{ 
    "name":"POPULATION (n=8)", 
    "children":[ 
     { 
     "name":"Event A is true", 
     "children":[ 
      { 
       "name":1, 
       "name1":"Total", 
       "name2":"POPULATION (n=8)", 
       "eventA":"Event A is true", 
       "eventB":"Event B is true", 
       "color":"#944dff", 
       "size":50 
      }, 
      { 
       "name":2, 
       "name1":"Total", 
       "name2":"POPULATION (n=8)", 
       "eventA":"Event A is true", 
       "eventB":"Event B is true", 
       "color":"#944dff", 
       "size":49 
      }, 
      { 
       "name":3, 
       "name1":"Total", 
       "name2":"POPULATION (n=8)", 
       "eventA":"Event A is true", 
       "eventB":"Event B is false", 
       "color":"#944dff", 
       "size":48 
      }, 
      { 
       "name":4, 
       "name1":"Total", 
       "name2":"POPULATION (n=8)", 
       "eventA":"Event A is true", 
       "eventB":"Event B is false", 
       "color":"#944dff", 
       "size":47 
      } 
     ] 
     }, 
     { 
     "name":"Event A is false", 
     "children":[ 
      { 
       "name":5, 
       "name1":"Total", 
       "name2":"POPULATION (n=8)", 
       "eventA":"Event A is false", 
       "eventB":"Event B is true", 
       "color":"#FFFFFF", 
       "size":46 
      }, 
      { 
       "name":6, 
       "name1":"Total", 
       "name2":"POPULATION (n=8)", 
       "eventA":"Event A is false", 
       "eventB":"Event B is true", 
       "color":"#FFFFFF", 
       "size":45 
      }, 
      { 
       "name":7, 
       "name1":"Total", 
       "name2":"POPULATION (n=8)", 
       "eventA":"Event A is false", 
       "eventB":"Event B is false", 
       "color":"#FFFFFF", 
       "size":44 
      }, 
      { 
       "name":8, 
       "name1":"Total", 
       "name2":"POPULATION (n=8)", 
       "eventA":"Event A is false", 
       "eventB":"Event B is false", 
       "color":"#FFFFFF", 
       "size":43 
      } 
     ] 
     } 
    ] 
} 

第三階層の問題がある

{ 
    "name":"POPULATION (n=8)", 
    "children":[ 
     { 
     "name":"Event B is true", 
     "children":[ 
      { 
       "name":"Event A is true", 
       "children":[ 
        { 
        "name":1, 
        "name1":"Total", 
        "name2":"POPULATION (n=8)", 
        "eventA":"Event A is true", 
        "eventB":"Event B is true", 
        "color":"#944dff", 
        "size":50 
        }, 
        { 
        "name":2, 
        "name1":"Total", 
        "name2":"POPULATION (n=8)", 
        "eventA":"Event A is true", 
        "eventB":"Event B is true", 
        "color":"#944dff", 
        "size":49 
        } 
       ] 
      }, 
      { 
       "name":"Event A is false", 
       "children":[ 
        { 
        "name":5, 
        "name1":"Total", 
        "name2":"POPULATION (n=8)", 
        "eventA":"Event A is false", 
        "eventB":"Event B is true", 
        "color":"#FFFFFF", 
        "size":46 
        }, 
        { 
        "name":6, 
        "name1":"Total", 
        "name2":"POPULATION (n=8)", 
        "eventA":"Event A is false", 
        "eventB":"Event B is true", 
        "color":"#FFFFFF", 
        "size":45 
        } 
       ] 
      } 
     ] 
     }, 
     { 
     "name":"Event B is false", 
     "children":[ 
      { 
       "name":"Event A is true", 
       "children":[ 
        { 
        "name":3, 
        "name1":"Total", 
        "name2":"POPULATION (n=8)", 
        "eventA":"Event A is true", 
        "eventB":"Event B is false", 
        "color":"#944dff", 
        "size":48 
        }, 
        { 
        "name":4, 
        "name1":"Total", 
        "name2":"POPULATION (n=8)", 
        "eventA":"Event A is true", 
        "eventB":"Event B is false", 
        "color":"#944dff", 
        "size":47 
        } 
       ] 
      }, 
      { 
       "name":"Event A is false", 
       "children":[ 
        { 
        "name":7, 
        "name1":"Total", 
        "name2":"POPULATION (n=8)", 
        "eventA":"Event A is false", 
        "eventB":"Event B is false", 
        "color":"#FFFFFF", 
        "size":44 
        }, 
        { 
        "name":8, 
        "name1":"Total", 
        "name2":"POPULATION (n=8)", 
        "eventA":"Event A is false", 
        "eventB":"Event B is false", 
        "color":"#FFFFFF", 
        "size":43 
        } 
       ] 
      } 
     ] 
     } 
    ] 
} 

Answer 1

、あなたはincorectlyを使用しています1回の更新で3回呼び出すことでを呼び出すことができます。最初のdata()コールだけが必要です。また、2番目の引数、つまりfunction(d) { return d.name; }が正しく入力された1つの場所です。

（私はこれをテストしたことはありませんが、あなたが追加した場合、物事はOKに働く可能性がありますが、他の二つのdata()のコールにその第二引数を追加しましたが、それは同様に不適切である）

私は置き換え適切なものでdata()への2回の呼び出し。私はまた、入力ブロックと更新ブロックの位置（すなわち、連続した順序）を入れ替えました。

入り遷移がまだかなり右、この後であってもよいが、これから起動しないでしょうチャンスがあります：

var vis = svg.selectAll('circle') 
    .data(nodes, function(d) { return d.name; }); 

// enter (it's not necessary to assign to 'var visEnter', but it's 
// available if you need to work more with that selection) 
var visEnter = vis.enter() 
    .append('circle') 
    .attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; }) 
    .attr("r", function(d) { return d.r * k; }) 
    .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; }) 
    .style("fill", function(d) { return d.children ? color(d.depth) : d.color; }) 
    .style("opacity", function(d) { return d.children ? 0.4 : 1; }); 

// update 
vis 
    .transition() 
    .each("start", function(d){ d3.select(this).moveToFront(); }) 
    .duration(duration) 
    .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; }) 
    .attr('transform', function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; }) 
    .style("fill", function(d) { return d.children ? color(d.depth) : d.color; }) 
    .style("opacity", function(d) { return d.children ? 0.4 : 1; }) 
    .attr('r', function(d) { return d.r; }); 


//exit  
vis.exit() 
    .transition() 
    .duration(duration) 
    .style('opacity', 0) 
    .remove();