Có thể ghi nhãn cạnh d3 không?

Question

Có thể có các nhãn cạnh trong biểu đồ bằng cách sử dụng d3 không? Tôi đã xem qua các ví dụ và một số tài liệu, và tôi có thể thấy nơi ghi nhãn nút là có thể, nhưng ghi nhãn cạnh không được đề cập rõ ràng ở bất cứ đâu (mà tôi có thể tìm thấy).

Answer 1

Tiếp theo dân tộc ví dụ khác tôi

• thêm một path bên cạnh mỗi cạnh,
• thêm text để các cạnh
• ràng buộc rằng văn bản đến một textpath mà là tham khảo các con đường dọc theo mép

Ví dụ này đang sử dụng thứ e ý tưởng ở trên: http://bl.ocks.org/jhb/5955887

Answer 2

Câu trả lời ngắn gọn là "có", nhưng không có hỗ trợ rõ ràng cho nó. Bạn sẽ phải tự xác định vị trí của nhãn. Một cách để làm điều này là đính kèm nhãn vào nút bắt đầu và dịch nó bằng một nửa khoảng cách đến nút đích, cộng với một số bù đắp để ngăn nó trùng lặp đường kẻ. Đối với các cạnh phức tạp hơn (ví dụ: đường cong) sẽ khó khăn hơn.

Answer 3

Tôi đã thử văn bản trên tùy chọn đường dẫn, nhưng nó khá liên quan và không dẫn đến sự xuất hiện mà tôi muốn. Thật không may, tôi đã không kiểm tra nó vào kho git cục bộ. Điều này xuất phát từ lịch sử Eclipse của tôi (nhờ các nhà phát triển Eclipse). Bạn sẽ phải thay đổi đoạn mã này thành cấu trúc dữ liệu của riêng bạn, nhưng tôi hy vọng nó sẽ giúp bạn. Cụ thể, hãy chú ý việc thêm giá trị id vào lựa chọn lines và sau đó sử dụng lại nó trong phần trăm lựa chọn bằng cách sử dụng thuộc tính xlink:href. Ngoài ra, tôi đã thêm một số tspan vào textpath để di chuyển văn bản xuống một vài pixel để nó xuất hiện trên đường dẫn thay vì trên đó.

 function drawLines(links) { 
     var diagonal = d3.svg.diagonal(); 
     var format = d3.format(".1%"); 
     var linkKey = function(l) {return l.target.key; }; 
     var lines = linesGroup.selectAll("path").data(links, linkKey); 
     lines.enter() 
      .append("path") 
      .on("mouseover", select) 
      .on("mouseout", unselect) 
      .attr("d", diagonal) 
      .attr("id", function (l) { return "interaction-path-target-" + l.target.key; }) 
      .style("stroke-width", 0.000001); 
     lines.exit() 
      .transition().duration(500) 
      .style("stroke-width", 0.000001) 
      .remove(); 

     lines.transition() 
      .delay(function(d, i) { return i * 100; }) 
      .duration(500) 
      .style("stroke-width", function(d) { return d.weight == 0 ? 0.000001 : d.weight/1000; }) 
      .attr("d", diagonal); 

     var percentages = linesGroup.selectAll("text").data(links, linkKey); 
     percentages.enter() 
      .append("text") 
      .attr("opacity", 1) 
      .append("svg:textPath") 
      .attr("startOffset", "70%") 
      .attr("xlink:href", 
        function(l) { 
         return "#interaction-path-target-" + l.target.key; 
        }) 
      .append("svg:tspan") 
      .attr("dy", 3) 
      .attr("class", "percentageText") 
     percentages.exit() 
      .transition().duration(500) 
      .attr("opacity", 0) 
      .remove(); 
     percentages 
      .transition() 
      .delay(function(d, i) { return i * 100; }) 
      .duration(500) 
      .attr("opacity", 1); 

     percentages.select(".percentageText").text(function(d) { 
       var newvalue = d.weight ? 
        d.incomming ? percentageIn(d.weight) : percentageOut(d.weight) : 0; 
       return format(newvalue); 
      }); 
    }