D3力指向圖的節點上的標籤/文本

我仍然不明白爲什麼代碼下面不顯示它的標籤/文本... 我已經定義了CSS並設置屬性，如移動時的標題在節點：D3力指向圖的節點上的標籤/文本

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

您要添加的文本元素圓元素內 - 嘗試運行您的代碼請看看DOM檢查器的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

D3力指向圖的節點上的標籤/文本

回答

相關問題