Mục tiêu của tôi là sử dụng bố cục lực d3 để hiển thị hai mạng khác nhau chia sẻ cùng một nút. Ví dụ, trong số bốn người, bạn có thể định nghĩa một mạng xã hội và một mạng lưới phả hệ; các nút sẽ giống nhau (mọi người) nhưng các liên kết (các mối quan hệ) có thể khác nhau. Mặc dù tạo hai bố cục lực riêng biệt, hai khung hình svg riêng biệt và cố gắng xác định các biến riêng biệt, các nút đang chia sẻ thông tin vị trí x và y. Dưới đây là một ví dụ rất nhỏ, trong đó kéo các nút trên một mạng thay đổi vị trí của họ trong mạng khác: http://amath.colorado.edu/student/larremore/nodesSharingPositiond3Nhiều trường hợp bố cục lực lượng d3 trên cùng một trang
Dưới đây, tôi đăng các chức năng đó được gọi là để tạo ra một trong những mạng lưới, và mã để tạo ra các khác là rất giống nhau, nhưng sử dụng tên biến khác nhau trong mọi trường hợp. Bạn có thể tìm thấy mã nhận xét để tạo cả hai mạng trong http://amath.colorado.edu/student/larremore/nodesSharingPositiond3/lib/minimal.js và tập lệnh được sử dụng để xác định các biến trong /driver/minimalScript.js < - Tôi không có đủ danh tiếng để liên kết trực tiếp. Lời xin lỗi của tôi!
Một nơi nào đó trong cách thức hoạt động của d3.force, thông tin vị trí là toàn cầu hoặc được chọn trên toàn cầu hoặc một thứ gì đó. Ai có thể làm sáng tỏ điều này? Tôi quan tâm cả hai trong một giải pháp để giữ thông tin vị trí tách biệt cũng như trong việc hiểu cách d3.force xử lý và cập nhật tính toán vị trí.
function makeYNet() {
// This populates the YactiveLinks variable with the proper YLinks. The goal is to be able to only display links whose value is above some threshold.
for (var i=0; i<YLinks.length; i++) {
if (YLinks[i].link2 > thr) {
YactiveLinks.push(YLinks[i]);
}
}
// Add nodes and links to forceY
forceY
.nodes(YNodes)
.links(YactiveLinks);
// Draw lines
var Ylink = svgY.selectAll("line.link")
.data(YactiveLinks)
.enter()
.append("line")
.attr("class", "link")
.style("stroke-width", 2.0);
// Draw nodes
var Ynode = svgY.selectAll("circle.node")
.data(YNodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", radius)
.attr("high",0)
.attr("id", function(d,i) {
return ("idy" + i);
})
.style("fill", function(d) { return color(d.group1); })
.call(forceY.drag)
;
// Define tick
forceY.on("tick", function() {
Ylink
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
Ynode.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
// Start 'er up
forceY.start();
}
Tôi đang cố gắng làm điều tương tự như bạn: đồng bộ hóa vị trí nút của hai bố trí lực trên cùng một trang. Tôi có hai bố trí lực lượng hoạt động nhờ vào câu trả lời của Alex Reynolds. Tuy nhiên, tôi không nhận được nơi để thiết lập các móc cho đồng bộ vị trí.Kể từ khi các liên kết đến cách tiếp cận của DBLaremore không hoạt động nữa, có bất cứ ai một gợi ý nơi để bắt đầu hoặc có thể liên kết đến một ví dụ khác? – tty56