Bố cục lực lượng D3.js - vị trí nhãn cạnh/xoay

Question

Tôi khá mới với D3.js và tôi đã chơi xung quanh với bố cục lực. Một trong những điều tôi đã thử là đặt nhãn lên các liên kết.

Một cách để thực hiện điều này là bằng cách thêm svg:text và tính theo cách thủ công translate & rotate, hoạt động tốt với đường thẳng. Tuy nhiên, trong trường hợp khi liên kết là svg:path (ví dụ: cung), điều này không hoạt động như mong đợi. Trong những trường hợp này, svg:textPath là giải pháp được đề xuất.

Trong this demo, bạn có thể thấy triển khai đơn giản thêm nhãn vào liên kết thông qua svg:textPath. Vấn đề duy nhất với nó là, trong trường hợp khi nguồn được đặt ở bên phải của mục tiêu, văn bản được trả về theo hướng ngược lại (từ quan điểm của chúng ta, nó vẫn đúng từ quan điểm của đường dẫn). Câu hỏi của tôi là, làm thế nào để đối phó với điều này?

Giải pháp "chỉ" Tôi đưa ra là, tự đổi nguồn và nhắm mục tiêu trong trường hợp được mô tả ở trên. Here, bạn có thể thấy rằng nó gần như hoạt động.

Trong trạng thái khi hoán đổi xảy ra, bạn cũng có thể thấy hồ quang lật sang một bên khác, mà không nhìn bên phải. :(

Answer 1

@LarsKotthoff là chính xác rằng textPath phải tuân theo hướng của đường dẫn. Trong trường hợp này, hướng của đường dẫn xác định không chỉ hướng cung, mà là phần đính kèm của điểm đánh dấu mũi tên ở cuối - điều này làm cho nó khó khăn để trao đổi hướng trên bay, vì bạn phải di chuyển các điểm đánh dấu quá

Giải pháp đơn giản (mặc dù có thể không phải là tốt nhất nếu bạn có một số lượng lớn các liên kết) là "bóng" đường dẫn liên kết thực với đường dẫn vô hình được sử dụng chỉ cho văn bản:

var link = svg.append("svg:g").selectAll("g.link") 
    .data(force.links()) 
    .enter().append('g') 
    .attr('class', 'link'); 

var linkPath = link.append("svg:path") 
    .attr("class", function(d) { return "link " + d.type; }) 
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; }); 

var textPath = link.append("svg:path") 
    .attr("id", function(d) { return d.source.index + "_" + d.target.index; }) 
    .attr("class", "textpath"); 

Bây giờ bạn có một con đường riêng biệt bạn có thể thao tác đúng cách. oticed, có hai vấn đề - bạn phải thay đổi hướng đường dẫn, và bạn phải thay đổi hướng vòng cung. Có vẻ như bạn có thể làm điều này trong chuỗi lệnh đường dẫn bằng cách hoán đổi giá trị sweep-flag (see docs), vì vậy thay vì Arx,ry 0 0,1 bạn có Arx,ry 0 0,0. Bạn có thể giảm một số trùng lắp mã bằng cách có một chức năng để tạo ra chuỗi đường dẫn:

function arcPath(leftHand, d) { 
    var start = leftHand ? d.source : d.target, 
     end = leftHand ? d.target : d.source, 
     dx = end.x - start.x, 
     dy = end.y - start.y, 
     dr = Math.sqrt(dx * dx + dy * dy), 
     sweep = leftHand ? 0 : 1; 
    return "M" + start.x + "," + start.y + "A" + dr + "," + dr + 
     " 0 0," + sweep + " " + end.x + "," + end.y; 
} 

Sau đó, bạn có thể cập nhật các đường liên kết và đường dẫn văn bản riêng biệt:

linkPath.attr("d", function(d) { 
    return arcPath(false, d); 
}); 

textPath.attr("d", function(d) { 
    return arcPath(d.source.x < d.target.x, d); 
}); 

Xem mã làm việc: http://jsfiddle.net/nrabinowitz/VYaGg/2/