D3將節點標籤放置在移動專利套件的圓圈內

Question

我是D3的新手，我正在使用此模板（http://bl.ocks.org/mbostock/1153292）可視化我的圖形。但是，我的節點的標籤是支撐的，我想將它們放在圓圈內，而不是放在右側。 有人可以幫我嗎？

非常感謝

Answer 1

追加圈和文本一組元素中，並使用文本阿克爾屬性來對齊文本中間。

var nodes = svg.selectAll(".node") 
    .data(force.nodes()) 
    .enter() 
    .append("g") 
    .attr("class","node") 
    .call(force.drag); 

var circles = nodes.append("circle") 
    .attr("r", 6); 

var texts = nodes.append("text") 
    .attr("text-anchor", "middle") 
    .text(function(d) { 
     return d.name; 
    }); 

更改滴答功能，如下所示。

function tick() { 
    path.attr("d", linkArc); 
    nodes.attr("transform", transform);  
} 

更新

JSFiddle 1用於對齊文本的中心。

如果您想要將文本標籤放在圓圈內，請使用name屬性的長度增加圓的半徑。請注意，這次您必須更新鏈接目標位置，以便相對於圓形半徑調整標記位置。

var circles = nodes.append("circle") 
    .attr("r", function(d){ d.radius = d.name.length*3; return d.radius; } 
); 

function linkArc(d) { 
    var tX = d.target.x-d.target.radius, 
     dx = tX - d.source.x, 
     dy = d.target.y - d.source.y, 
     dr = Math.sqrt(dx * dx + dy * dy); 
    return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + tX + "," + d.target.y; 
} 

JSFiddle 2