使用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

问题是，您通过调用3次进行单次更新，无法使用vis.data(...)。只有第一个data()电话是必要的，而且它也是您正确提供第二个参数的地方，即function(d) { return d.name; }。

（我从来没有对此进行过测试，但是如果你在其他两个data()调用中添加了第二个参数，那么事情就有可能正常工作，但这也是不合适的。

我用适当的东西替换了对data()的两次调用。我还交换了输入和更新块的位置（即顺序）。

此后进入转换的可能性仍然不大，但从此开始：

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