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>

उपरोक्त कोड कुछ डेटा से बल-निर्देशित ग्राफ़ ड्राइंग खींचने के लिए डी 3 जे का उपयोग कर रहा है, और मैं सिर्फ सर्कल पर कुछ टेक्स्ट रखना चाहता हूं, इसलिए मैं node.append ("text") का उपयोग करता हूं, जिसे आप ऊपर देख सकते हैं ।D3.js बल लेआउट का उपयोग करते समय सर्कल पर टेक्स्ट कैसे रखें?

लेकिन हालांकि जब इसे जोड़ते हैं तो यह काम नहीं करता है, फिर भी सर्कल पर पाठ नहीं है इसलिए मुझे आश्चर्य है कि यह कैसे हो सकता है ????

स्रोत

2013-12-18 user2579274

एसवीजी 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, g.node पर transform गुण सेट:

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

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

स्रोत

2013-12-18 15:41:24

D3.js बल लेआउट का उपयोग करते समय सर्कल पर टेक्स्ट कैसे रखें?

उत्तर

संबंधित मुद्दे