D3 force directed 그래프의 노드에있는 레이블/텍스트

코드 벨로우즈가 레이블/텍스트를 표시하지 않는 이유를 아직도 이해할 수 없습니다 ... 이동을 정의 할 때 CSS와 제목을 같은 속성으로 설정했습니다D3 force directed 그래프의 노드에있는 레이블/텍스트

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 force directed 그래프의 노드에있는 레이블/텍스트

답변

관련 문제