我一直在寻找从放射状Tilford树中删除根节点的方法,但到目前为止还算不上什么。我发现了类似的问题here,但是提供的答案不够具体,无法完全理解我需要在哪里使用d.depth > 0
。我试图将这行代码添加到有意义但不成功的位置(例如node.append和.data(nodes))。附加的代码段类似于用户@JSBob在另一个问题中所指的位置,因为我是D3的新手,所以任何方向都将有所帮助!
function createVisualization(root){
//if (error) throw error;
drawLegend();
var nodes = tree.nodes(root),
links = tree.links(nodes);
console.log(nodes);
var link = svg.selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("d", diagonal);
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
.on("mouseover", mouseOverArc)
.on("mousemove", mouseMoveArc)
.on("mouseout", mouseOutArc);
node.append("circle").attr("r", 5)
.style("fill", function(d) {
if(d.size == 0) {
return "#8c6226"; //Brown
} else if(d.size == 1){
return "#DC143C"; //Crimson
} else if(d.size == 2){
return "#FFA500"; //Orange
} else if(d.size == 3){
return "#32CD32"; //LimeGree
} else if(d.size == 4){
return "#1E90FF"; //DodgerBlue
}
;})
最佳答案
使用 :
var link = svg.selectAll(".link")
.data(links)
.enter().append("path")
.filter(function(d) { return d.source.depth != 0})
.attr("class", "link")
.attr("d", diagonal);
删除到根节点的链接,并
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("g")
.filter(function(d) { return d.depth != 0})
.attr("class", "node")
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
删除根节点
参见示例:http://plnkr.co/edit/GkXtUoAvUa6nijNCERxz?p=preview