Làm thế nào để đặt văn bản trên vòng tròn khi sử dụng bố cục lực 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>

Đoạn mã trên đang sử dụng D3j để vẽ đồ thị theo hướng Force từ một số dữ liệu và tôi chỉ muốn đặt một số văn bản trên vòng tròn để sử dụng node.append ("văn bản"). .Làm thế nào để đặt văn bản trên vòng tròn khi sử dụng bố cục lực D3.js?

Nhưng tuy nhiên khi thêm nó không hoạt động, vẫn không có văn bản trên vòng tròn vì vậy tôi tự hỏi làm thế nào nó có thể được ????

Nguồn

2013-12-18 user2579274

SVG không cho phép phần tử text bên trong phần tử circle. Bạn nên đặt circle và phần tử text bên trong một số g chung. Hãy thử một cái gì đó như thế này (không kiểm tra):

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");

Và sau đó thay vì thiết cx và cy trên các nút, thiết lập transform tài sản trên g.node:

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

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

Nguồn

2013-12-18 15:41:24

Làm thế nào để đặt văn bản trên vòng tròn khi sử dụng bố cục lực D3.js?

Trả lời

Các vấn đề liên quan