डी 3 बल के नोड्स पर लेबल/पाठ निर्देशित ग्राफ

मुझे अभी भी समझ में नहीं आ रहा है कि क्यों कोड bellow अपने लेबल/पाठ प्रदर्शित नहीं करता है ... मैंने सीएसएस को परिभाषित किया है और जब चाल चलती है तो शीर्षक की विशेषता सेट करेंडी 3 बल के नोड्स पर लेबल/पाठ निर्देशित ग्राफ

Json: नोड पर

{ 
"nodes":[ 
    {"name":"t1","group":1}, 
    {"name":"t2","group":1}, 
    {"name":"t3","group":1}, 
    {"name":"t4","group":1}, 
    {"name":"hate","group":2}, 
    {"name":"good","group":2}, 
    {"name":"aiport","group":3}, 
    {"name":"flight","group":3} 
], 
"links":[ 
    {"source":0,"target":4,"value":4}, 
    {"source":0,"target":5,"value":4}, 
    {"source":1,"target":4,"value":4}, 
    {"source":2,"target":5,"value":4}, 
    {"source":3,"target":5,"value":4}, 
    {"source":4,"target":6,"value":4}, 
    {"source":5,"target":6,"value":4}, 
    {"source":5,"target":7,"value":4} 
] 
}

कोड:

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

.node { 
    fill: #555; 
    stroke: #999; 
    stroke-width: 1.5px; 
} 

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

</style> 
<body> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
    <script> 

    var width = 1024, 
     height = 768; 

    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("line.link") 
      .data(graph.links) 
     .enter().append("line") 
      .attr("class", "link") 
      .style("stroke-width", function(d) { return Math.sqrt(d.value); }); 

    var node = svg.selectAll("circle.node") 
      .data(graph.nodes) 

     .enter().append("circle") 
      .attr("class", "node") 
      .attr("r", 5) 
      .style("fill", function(d) { return color(d.group); }) 
      .call(force.drag); 

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

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


     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> 
    </body> 
</html>

स्रोत

2012-11-13 Devester

http://bl.ocks.org/MoritzStefaner/1377729 – Jordan

आप चक्र तत्व के अंदर पाठ तत्व जोड़ रहे हैं - अपने कोड एक चलाने की कोशिश करें डीओएम निरीक्षक के साथ svg पर एक नज़र डालें। मुझे यकीन नहीं है कि पाठ की अनुमति है।

var texts = svg.selectAll("text.label") 
       .data(graph.nodes) 
       .enter().append("text") 
       .attr("class", "label") 
       .attr("fill", "black") 
       .text(function(d) { return d.name; }); 

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

    texts.attr("transform", function(d) { 
     return "translate(" + d.x + "," + d.y + ")"; 
    }); 
});

स्रोत

2012-11-13 21:40:30 Superboggly

एक अन्य विकल्प होगा दोनों चक्र और पाठ एक जी कंटेनर तत्व के अंदर तत्वों को जोड़ने के रूप में नीचे दिखाया गया है:

नोड्स के एक और प्रतिपादन की तरह - इसके बजाय पाठ तत्वों को अलग से जोड़ने

var container = svg.selectAll("g.node").data(graph.nodes).enter().append("g") 
.attr("class", "node") 
.attr("transform", function (d) { 
    return "translate(" + d.x + "," + d.y + ")"; 
}).call(force.drag); 

container.append("circle") 
.attr("r", 5) 
.style("fill", color); 

container.append("text") 
.style("text-anchor", "middle") 
.text(function (d) { 
    return d.name; 
});

यहाँ आप एक काम कर jsfiddle साथ खेल सकते हैं:

http://jsfiddle.net/vfu78/16/

स्रोत

2014-06-26 14:41:51

डी 3 बल के नोड्स पर लेबल/पाठ निर्देशित ग्राफ

उत्तर

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