D3.js - 강제 방향 그래프의 노드에 텍스트 추가

Question

힘 지향 그래프를 만들고 그래프 노드에 텍스트를 추가하고 싶습니다.

콘솔에서 텍스트 요소가 원에 추가되지만 값이 없음을 알 수 있습니다.

그래프에 대한 코드는 다음과 같다 : 지금은

var force = d3.layout.force() 
      .charge(-120) 
      .linkDistance(40); 

    var width = $(document).width() - 550; 
     height = $(document).height() - 300; 

    var colour = d3.scale.category20(); 

    var svg = d3.select("body").append("svg") 
     .attr("width", width) 
     .attr("height", height) 
     .attr("style", "outline: thin solid black;"); 

    force 
     .size([width, height]) 
     .nodes(convertedInfo.nodes) 
     .links(convertedInfo.links) 
     .start(); 

    //Adding nodes and data 
    var link = svg.selectAll("link") 
     .data(convertedInfo.links) 
     .enter() 
     .append("line") 
     .attr("stroke-width", 3) 
     .attr("class", "link") 
     .attr("stroke", "grey"); 

    var node = svg.selectAll("node") 
     .data(convertedInfo.nodes) 
     .enter() 
     .append("circle") 
     .attr("r", 7) 
     .attr("class", "node") 
     .style("fill", function(d) {return colour(d.domain_count);}) 
     .append('text'); 

     var text = svg.selectAll("text") 
     .data(convertedInfo.nodes) 
     .enter() 
     .append("text") 
     .attr("x", function(d) { return d.cx; }) 
     .attr("y", function(d) { return d.cy; }) 
     .text('text') 
     .attr("font-family", "sans-serif") 
     .attr("font-size", "20px") 
     .attr("fill", "red"); 

    //Fisheye view 
    var fisheye = d3.fisheye.circular() 
     .radius(70) 
     .distortion(2); 

    svg.on("mousemove", function() { 
     fisheye.focus(d3.mouse(this)); 

    node.each(function(d) { d.fisheye = fisheye(d); }) 
     .attr("cx", function(d) { return d.fisheye.x; }) 
     .attr("cy", function(d) { return d.fisheye.y; }) 
     .attr("r", function(d) { return d.fisheye.z * 4.5; }); 

    link.attr("x1", function(d) { return d.source.fisheye.x; }) 
     .attr("y1", function(d) { return d.source.fisheye.y; }) 
     .attr("x2", function(d) { return d.target.fisheye.x; }) 
     .attr("y2", function(d) { return d.target.fisheye.y; }); 
    }); 

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

    }); 

내가 그렇게된다면 내가 볼 수 있도록 단지 text 값의 자리 표시자를 넣어 있습니다.

이 코드의 잘못된 점은 무엇입니까?

Answer 1

SVG에서는 텍스트 요소를 원 안에 넣을 수 없습니다. 실제로 원, 직사각형, 패스 등에는 아무 것도 추가 할 수 없습니다. 더 나은 접근 방법은 각 점에 그룹을 추가하고이를 원하는 위치로 변환 한 다음 원과 텍스트 요소를 그 안에 넣는 것입니다. 여기에 관련 코드가 있습니다.

var node = svg.selectAll("g.node") 
    .data(convertedInfo.nodes) 
    .enter() 
    .append("g") 
    .attr("class", "node") 
    .attr("transform", function(d){ 
    return "translate(" + d.fisheye.x + "," + d.fisheye.y + ")"; 
    }) 
    .each(function(d){ d.fisheye = fisheye(d); }); 

node.append("circle") 
    .attr("r", 7) 
    .style("fill", function(d) {return colour(d.domain_count);}) ; 

node.append("text") 
    .text("text") 
    .attr("x", 3.5) 
    .attr("y", 3.5) 
    .attr("text-anchor", "middle"); 

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("transform", function(d){ 
    return "translate(" + d.fisheye.x + "," + d.fisheye.y + ")"; 
    }); 
});