I'm want to add moving labels on nodes in a D3 force directed graph (example : http://mbostock.github.io/d3/talk/20111116/force-collapsible.html). I don't have problem to add some text (nodes names defined in my data.json), but is X/Y position is fixed to the initial nodes X/Y position. I try transform and translate functions but without success. Here is a sample of my code :
// Update the nodes…
node = vis.selectAll("circle.node")
.data(nodes, function(d) { return d.id; })
.style("fill", color);
node.transition()
.attr("r", function(d) { return d.children ? 4.5 : Math.sqrt(d.size) / 10; });
// Labels
node.enter().append("svg:text")
.attr("dx", function(d) { return d.x; })
.attr("dy", function(d) { return d.y; })
.attr("fill", "#ffffff")
.attr('text-anchor', 'center')
.text(function(d) { return d.name });
// Enter any new nodes.
node.enter().append("svg:circle")
.attr("class", "node")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return d.children ? 4.5 : Math.sqrt(d.size) / 10; })
.style("fill", color)
.on("click", click)
.call(force.drag);
// Exit any old nodes.
node.exit().remove();
}
function tick() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
You will first have to label selection like this
text = vis.selectAll("text.label")
.data(nodes);
// Enter any new label
text.enter()
.append("text")
.attr("class", "label")
.text(function(d) { return d.name; });
//remove text for collapsed nodes.
text.exit().remove();
Then in the ticks function handle the text move (This is what you were missing as a result of which your text was coming fixed)
function tick() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
//this will handle the label move
text.attr("transform", function(d){ return "translate("+d.x+","+d.y+")"; });
}
working example here
Hope this helps!
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments