我有一个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
}
]
}
]
}
]
}
答案 0 :(得分：0)
问题是，您通过调用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();