如何在使用D3.js強制佈局時在圓上放置文本？

<!DOCTYPE html> 
<html> 
<meta charset="utf-8"> 

<style> 

.node { 
    stroke: #fff; 
    stroke-width: 1.5px; 
} 

.link { 
    stroke: #999; 
    stroke-opacity: .6; 
} 

</style> 
<body> 
</body> 
<script src="d3.v3.min.js"></script> 
<script> 

var width = 960, 
    height = 500; 

var color = d3.scale.category20(); 

var force = d3.layout.force() 
    .charge(-120) 
    .linkDistance(30) 
    .size([width, height]); 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

d3.json("data.json", function(error, graph) { 
    force 
     .nodes(graph.nodes) 
     .links(graph.links) 
     .start(); 

    var link = svg.selectAll(".link") 
     .data(graph.links) 
    .enter().append("line") 
     .attr("class", "link") 
     .style("stroke-width", function(d) { return Math.sqrt(d.value); }); 

    var node = svg.selectAll(".node") 
     .data(graph.nodes) 
    .enter().append("circle") 
     .attr("class", "node") 
     .attr("r", function(d) {return d.r;}) 
     .style("fill", function(d) { return color(d.group); }) 

    node.append("title") 
     .text(function(d) { return d.name; }); 

    node.append("text") 
     .text("A"); 

    force.on("tick", function() { 
    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; }); 
    }); 
}); 

</script> 
</html>

上面的代碼是使用D3js從一些數據繪製一個強制指向的圖形繪製，我只想在圓上放置一些文本，所以我使用node.append（「text」），你可以在上面看到它。如何在使用D3.js強制佈局時在圓上放置文本？

但是，當添加它不起作用，圓上仍然沒有文字，所以我不知道它怎麼可能？

來源

2013-12-18 user2579274

SVG不允許circle元素中的text元素。您應該將circle和text元素放在共同的g內。嘗試是這樣的（未測試）：

var node = svg.selectAll(".node") 
     .data(graph.nodes).enter().append('g').classed('node', true); 

    node.append("circle") 
     .attr("r", function(d) {return d.r;}) 
     .style("fill", function(d) { return color(d.group); }) 
     .append("title") 
     .text(function(d) { return d.name; }); 

    node.append("text") 
     .text("A");

上的節點

然後，而不是設置cx和cy，設置transform屬性上g.node：

force.on("tick", function() { 
    // ... 

    node.attr("transform", function(d) { return 'translate(' + [d.x, d.y] + ')'; }) 
    });

來源

2013-12-18 15:41:24

如何在使用D3.js強制佈局時在圓上放置文本？

回答

相關問題