D3.js kuvvet düzenini kullanırken daire nasıl yerleştirilir?

<!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>

Yukarıdaki kod bazı verilerden çizim bir Kuvvet yönlendirilmiş grafik çizmek için D3js kullanıyor ve sadece yukarıda görebilirsiniz ("metin") bu yüzden node.append kullanmak dairenin bazı metni yerleştirmek istediğiniz .D3.js kuvvet düzenini kullanırken daire nasıl yerleştirilir?

Ama ancak bu işe yaramazsa ekleyin hala bu yüzden nasıl olabilir acaba çemberin orada metin değildir ????

kaynak

2013-12-18 user2579274

SVG bir circle öğenin içinde bir text elemanı izin vermez. circle ve text öğelerini ortak bir g içine koymalısınız. g.node üzerinde transform özelliğini ayarlayın, düğümlerde

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

Ve sonra yerine cx ayarlama ve cy:

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

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

böyle bir şey (test) Deneyin

kaynak

2013-12-18 15:41:24

D3.js kuvvet düzenini kullanırken daire nasıl yerleştirilir?

cevap

İlgili konular