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

あなたは円の要素内のテキスト要素を追加している - あなたのコードaを実行してみてください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

別の選択肢は、以下に示すように円と両方のテキストをGコンテナ要素内要素を追加することであろう。

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強制有向グラフのノード上のラベル/テキスト

答えて

関連する問題