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