D3.js Kết nối động giữa các đối tượng

Question

Tôi rất mới đối với cả JS và D3, và tôi đã googled này một tấn nhưng chỉ tìm thấy ví dụ đó là một chút quá tiên tiến.

Tôi đang thực hiện triển khai đồ thị quyết định đơn giản và tôi đang cố gắng kết nối 2 nút bằng một dòng/đường dẫn. Các đối tượng có thể được di chuyển xung quanh bằng chuột và đường dẫn phải luôn cập nhật để phản ánh vị trí của các đối tượng.

Đây là nguồn kiến ​​thức cơ bản của tôi: https://github.com/mbostock/d3/wiki/SVG-Shapes, nhưng tôi không hiểu làm thế nào để làm một cái gì đó thông minh với nó.

Dưới đây là những gì tôi có cho đến nay: http://jsbin.com/AXEFERo/5/edit

Không cần những thứ lạ mắt, chỉ cần hiểu làm thế nào để tạo kết nối và có họ cập nhật tự động khi các đối tượng đang được kéo xung quanh. Cảm ơn nhiều!

Answer 1

Để vẽ một đường thẳng giữa các vòng tròn, bạn không cần bất kỳ điều gì đặc biệt - chỉ cần phần tử line.

var line = svg.append("line") 
     .style("stroke", "black") 
     .attr("x1", 150) 
     .attr("y1", 100) 
     .attr("x2", 250) 
     .attr("y2", 300); 

Cập nhật vị trí động khó hơn một chút. Tại thời điểm này, bạn không có phương tiện phân biệt vòng tròn nào đang được kéo. Một cách để làm điều này là thêm một lớp phân biệt vào các phần tử g.

var g1 = svg.append("g") 
     .attr("transform", "translate(" + 150 + "," + 100 + ")") 
     .attr("class", "first") 
     ... 

và tương tự cho loại kia. Bây giờ bạn có thể bật lớp học trong hàm dragmove của bạn và cập nhật tọa độ đầu hoặc cuối của dòng.

if(d3.select(this).attr("class") == "first") { 
      line.attr("x1", x); 
      line.attr("y1", y); 
} else { 
      line.attr("x2", x); 
      line.attr("y2", y); 
} 

Ví dụ hoàn chỉnh here. Có những cách khác, thanh lịch hơn để đạt được điều này. Trong một ứng dụng thực tế, bạn sẽ có dữ liệu ràng buộc với các phần tử và có thể sử dụng nó để phân biệt giữa các vòng tròn khác nhau.