Mạng bản đồ khái niệm - Vấn đề về nút

Question

Tôi đang cố triển khai Sơ đồ mạng bản đồ khái niệm bằng cách sử dụng d3.js. Mẫu đồ thị có sẵn ở đây trong js-fiddle.

js-fiddle

hướng Nút trỏ từ chỉ hướng bên trái. Tất cả các nút ở bên phải có các đường từ mặt sau của hình chữ nhật. Tôi muốn hiển thị tất cả các điểm nút ở bên trái cũng như từ bên phải.

mong đợi Graph:

Answer 1

Tôi đã tìm thấy giải pháp bằng cách kiểm tra vị trí đường cong bằng cách sử dụng mã này.

if(af.x>180) 
{ 
    af.xOffset = -S; 
}else 
{ 
    af.xOffset = S; 
} 

và bằng cách kiểm tra điều kiện cho chức năng push

if (ab.x > 180) { 
        H.push({ 
         source: ae, 
         target: ab, 
         key: aa, 
         canonicalKey: aa, 
         x1: ae.x + (ab.type === "theme" ? 0 : U), 
         y1: ae.y + K/2, 
         x2: Math.cos(Y) * X + ab.xOffset, 
         y2: Math.sin(Y) * X 
        }) 
       } 
       else if (ae.x < 180) { 
        H.push({ 
         source: ae, 
         target: ab, 
         key: aa, 
         canonicalKey: aa, 
         x1: ae.x + (ab.type === "theme" ? U : 0), 
         y1: ae.y + K/2, 
         x2: Math.cos(Y) * X + ab.xOffset, 
         y2: Math.sin(Y) * X 
        }) 
       } 

Output dự kiến ​​là

Answer 2

Vấn đề bạn đang gặp phải là các liên kết nút tham gia vào góc cao bên trái. của cột trung tâm đó.

Bạn cần phải:

1. Tìm nguồn gốc của tất cả các liên kết đi đến phía bên tay phải.
2. Bù đắp vị trí x nguồn theo chiều rộng của cột trung tâm.

Có thể tôi đã có nguồn và mục tiêu được trộn lẫn. Mã trông được rút gọn một phần, vì vậy nó khá khó đọc.

Bạn có thể lấy chiều rộng của một phần tử tương đối dễ dàng (Example).

Bạn có thể nhận ra liệu liên kết có nên được thay đổi hay không bằng cách so sánh vị trí x nguồn và mục tiêu. Ngoài ra, bạn có thể nhìn vào các nút liên kết đến thứ gì đó ở phía bên tay phải, có thể hơi phức tạp hơn một chút nhưng nhận ra các liên kết cần thay đổi chính xác hơn.

EDIT:

Bạn cũng có thể thử liên kết với các trung tâm của nút, thay vì góc.