Dendrogram 예제에서 가장자리에 라벨을 붙이는 방법은 무엇입니까?

Question

Dendrogram 예 (source)와 같은 트리 다이어그램이 주어지면 가장자리에 레이블을 어떻게 두겠습니까? 가장자리를 그릴 수있는 자바 스크립트 코드는 다음 라인과 같습니다

var link = vis.selectAll("path.link") 
    .data(cluster.links(nodes)) 
    .enter().append("path") 
    .attr("class", "link") 
    .attr("d", diagonal); 

Answer 1

마이크 Bostock, 매우 우아하게 다음과 같은 솔루션을 도움 D3의 저자. g.link에 대한 스타일을 정의하십시오. 방금 g.node의 스타일을 복사했습니다. 그런 다음 "var link = ...."코드를 다음으로 대체했습니다. x 및 y 함수는 경로의 가운데에 레이블을 배치합니다.

var linkg = vis.selectAll("g.link") 
    .data(cluster.links(nodes)) 
    .enter().append("g") 
    .attr("class", "link"); 

linkg.append("path") 
    .attr("class", "link") 
    .attr("d", diagonal); 

linkg.append("text") 
    .attr("x", function(d) { return (d.source.y + d.target.y)/2; }) 
    .attr("y", function(d) { return (d.source.x + d.target.x)/2; }) 
    .attr("text-anchor", "middle") 
    .text(function(d) { 
     return "edgeLabel"; 
    }); 

텍스트 기능은 각 가장자리에 특별히 레이블을 제공해야합니다. 내 데이터를 준비하는 동안 내 텍스트 기능은 다음과 같습니다 그래서 나는 나의 가장자리의 이름을 가진 객체를 채워 :

몇 사람들은 X의의를 교환 유혹하고 Y는`의 두 번째와 세 번째 라인의

.text(function(d) { 
     var key = d.source.name + ":" + d.target.name; 
     return edgeNames[key]; 
    });