Tránh va chạm giữa các nút và các cạnh trong D3 bố trí lực lượng

Question

Trong ví dụ này: http://bl.ocks.org/mbostock/1747543:

... Mike cho chúng ta thấy làm thế nào để tránh va chạm giữa các nút để không có hai nút chồng lên nhau.

Tôi tự hỏi liệu có thể tránh va chạm giữa các nút và các cạnh sao cho không có nút 'clip' hoặc chồng chéo một cạnh trừ khi nó được kết nối bởi cạnh đó.

Ví dụ sau sử dụng chương trình D3 lực trực tiếp mà nút L trùng lặp với các cạnh nối I và A, và tương tự, nút M trùng lặp với các cạnh nối L và D. Làm thế nào để chúng tôi ngăn chặn các trường hợp như vậy?

Answer 1

Nếu đồ thị của bạn không có quá nhiều nút, bạn có thể giả mạo nó. Chỉ cần chèn một hoặc nhiều nút cho mỗi liên kết và đặt vị trí của chúng dọc theo liên kết trong trình xử lý tick. Kiểm tra http://bl.ocks.org/couchand/7190660 cho một ví dụ, nhưng những thay đổi số lượng phiên bản Mike Bostock để về cơ bản chỉ:

var linkNodes = []; 

graph.links.forEach(function(link) { 
    linkNodes.push({ 
    source: graph.nodes[link.source], 
    target: graph.nodes[link.target] 
    }); 
}); 

và

// force.on('tick', function() { 
linkNodes.forEach(function(node) { 
    node.x = (node.source.x + node.target.x) * 0.5; 
    node.y = (node.source.y + node.target.y) * 0.5; 
}); 

này sẽ giới thiệu một buổi biểu diễn trên không khá nghiêm trọng nếu bạn có rất nhiều nút và các cạnh , nhưng nếu đồ thị của bạn không lớn hơn nhiều so với ví dụ của bạn, nó sẽ khó nhận thấy.

Bạn cũng có thể muốn nhấn mạnh với lực tương đối của các nút thực so với các nút liên kết.

Thực hiện thêm một bước nữa và bạn sẽ nhận được các liên kết cong đẹp của http://bl.ocks.org/mbostock/4600693.