D3 모바일 특허 슈트의 노드 안쪽에 노드 레이블 배치

Question

D3을 처음 사용했으며이 템플릿 (http://bl.ocks.org/mbostock/1153292)을 사용하여 그래프를 시각화했습니다. 그러나 내 노드의 레이블은 해안이므로 오른쪽에있는 것이 아닌 원 안에 레이블을 배치하고 싶습니다. 아무도 도와 줄 수 있습니까?

덕분에 많은

Answer 1

추가] 원과 텍스트 그룹 요소 내부 중간에 텍스트를 정렬하는 텍스트 achor 속성을 사용합니다.

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