问题
I have the following code
var m = [20, this.settings.get("margin_right"), 20, this.settings.get("margin_left")],
w = width - m[1] - m[3],
h = height - m[0] - m[2],
i = 0;
var tree = d3.layout.tree()
.size([h, w]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var vis = d3.select(this.el).append("svg:svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("svg:g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
data.x0 = h / 2;
data.y0 = 0;
function toggle_children(tree, level) {
if(tree.children) {
_(tree.children).each(function(child) {
toggle_children(child, level+1);
});
if(level >= initial_open_level) {
toggle(tree);
}
}
}
var initial_open_level = this.settings.get("initial_open_level");
if(initial_open_level >= 1) {
toggle_children(data, 1);
}
var duration = 0;
// root = data.children[0];
// update(root);
update(data);
I want to hide only the root element of a dendrogram but I don't know how .Can anyone please help me? Thanks.
Here is the update function for nodes ...........................................................................................................................................................................................................................................................................................................................................................................................................
function update(source) {
// alert(source.name);
// Compute the new tree layout.
console.log("Passo da update");
// var nodes = tree.nodes(root).reverse();
var nodes = tree.nodes(data).reverse();
// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 320; });
// Update the nodes…
var node = vis.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("svg:g")
//.attr("class", "node")
.attr("class", function(d) { return d._children ? "node node_close" : "node node_open"; })
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
.on("click", function(d) { toggle(d); update(d); });
console.log(d.name);
nodeEnter.append("svg:circle")
.attr("r", 10)
.style("fill", function(d) { return checkColor(d);})
.style("cursor", function(d) { return d.children || d._children ? "pointer" : "default"; })
.style("stroke", node_outline_color);
nodeEnter.append("svg:text")
.attr("x", function(d) { return d.children || d._children ? -10 : 10; })
.attr("dy", "25")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.style("cursor", function(d) { return d.children || d._children ? "pointer" : "default"; })
.style("fill-opacity", 1e-6)
.text(function(d) {
if(has_size) {
var sum = Number(d.sum) .toLocaleString('en');
var size = Number(d.size).toLocaleString('en');
if(d.name == "TARGET"){
var long_label = "";
var short_label = "";
}else {
var long_label = d.name + ' ( ' + sum + ' ) - ( ' + d.count + ' )';
var short_label = d.name + ' ( ' + size + ' )';
}
return d.children || d._children ? long_label : short_label;
}
else {
if(d.name == "TARGET"){
d.name = "";
}
return d.name;
}
});
.call(wrap,40);
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
nodeUpdate.select("circle")
.attr("r", 10)
.style("fill", function(d) { return checkColor(d);})
// .style("fill", function(d) { return d._children ? node_close_color : node_open_color; });
nodeUpdate.select("text")
.style("fill-opacity", 1);
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.remove();
nodeExit.select("circle")
.attr("r", 1e-6);
nodeExit.select("text")
.style("fill-opacity", 1e-6);
// Update the links…
var link = vis.selectAll("path.link")
.data(tree.links(nodes), function(d) { return d.target.id; });
// Enter any new links at the parent's previous position.
link.enter().insert("svg:path", "g")
.attr("class", "link")
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
})
.transition()
.duration(duration)
.attr("d", diagonal);
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();
// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
回答1:
The easiest way to do this would be to filter your update selections on the depth (depth === 0 is the root node):
var node = vis.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
node = node.filter(function(d) { return d.depth > 0 });
You'd also have to do this for the links:
var link = vis.selectAll("path.link")
.data(tree.links(nodes), function(d) { return d.target.id; });
link = link.filter(function(d) { return d.source.depth > 0 });
来源：https://stackoverflow.com/questions/40176933/how-i-can-hide-the-root-element-in-a-dendogram-d3