用D3.pack過渡后重疊的圓

Question

我有一個JSON文件，可以使用d3.nest（）函數進行重組，然后將其用於轉換為其他狀態。

但是，當我執行過渡時，頂層層次結構中的圓圈會以任何方式重疊，並且它們的運動也不是很優雅（它們出現並消失了我們現在的位置）。 我設法通過使用moveToFront（）函數將頂部節點保持在頂部，這是另一個問題的建議。 這對於頂部節點非常有用，但並不是對每個圖層都有效。 我將圓圈設為半透明，因此更容易了解發生了什么。

我也試圖添加標簽，但是無論我做什么，它都完全混亂了。 我在想也許是因為訂單搞砸了？

這是我所討論功能的代碼。 我還放置了三個JSON文件樣本，分別代表我正在使用的三個層次結構。

如果有人可以幫助，將不勝感激！

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

問題是，您不正確地使用vis.data(...)並對其進行了3次調用vis.data(...)一次更新）。 只有第一個data()調用是必需的，它也是您正確提供第二個參數的地方，即function(d) { return d.name; } function(d) { return d.name; } 。

（我從未測試過此方法，但是如果您在其他兩個data()調用中添加了第二個參數，則有可能一切正常，但這也是不合適的）

我用適當的東西替換了對data()的兩次調用。 我還交換了enter和update塊的位置（即順序）。

在此之后，進入過渡的機會仍然不太正確，但是從這里開始：

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();