Làm thế nào để đặt nhãn trên các cạnh trong ví dụ Dendrogram?

Question

Cho một sơ đồ cây như ví dụ Dendrogram (source), làm cách nào để đặt nhãn trên các cạnh? Mã Javascript để vẽ các cạnh trông giống như các dòng tiếp theo:

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

Answer 1

Mike Bostock, tác giả của D3, rất ân cần giúp đỡ với các giải pháp sau đây. Xác định kiểu cho g.link; Tôi vừa sao chép phong cách cho g.node. Sau đó, tôi thay thế "var link = ...." mã với những điều sau đây. Các hàm x và y đặt nhãn ở giữa đường dẫn.

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

Hàm văn bản lý tưởng nên cung cấp nhãn riêng cho từng cạnh. Tôi dân cư một đối tượng với tên của các cạnh tôi trong khi chuẩn bị dữ liệu của tôi, vì vậy chức năng văn bản của tôi trông như thế này:

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