Cách cập nhật các phần tử bố trí lực D3 khi dữ liệu cơ bản thay đổi

Question

Tôi đang sử dụng một trong các ví dụ bố cục lực (http://bl.ocks.org/1153292) để hiển thị một mạng trên trang web của tôi.

Tôi cho phép người dùng chọn loại liên kết để xem tại bất kỳ thời điểm cụ thể nào. Tôi nhận thấy rằng khi tôi chọn xem liên kết loại A, sau đó thêm liên kết loại B và sau đó loại bỏ liên kết loại A vẫn còn liên kết của loại B được trình bày với A màu sắc.

Đây là mã chạy để thêm liên kết vào biểu đồ svg. Tôi đang thay đổi mảng this.links bằng cách thêm và xóa liên kết khỏi mảng đó. Như bạn có thể thấy tôi thiết lập các thuộc tính lớp nhưng nó không được cập nhật - nó còn lại của loại liên kết A.

var path = svg.append("svg:g") 
    .selectAll("path") 
    .data(this.links) 
    .enter() 
    .append("svg:path") 
    .attr("class", function(d) { return "link " + d.type; }) 
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; }); 

Tôi hiện làm việc xung quanh vấn đề này bằng cách cập nhật các thuộc tính lớp bên trong hàm đánh dấu nhưng điều này tắt khóa học nguyên nhân nhiều công việc không cần thiết.

Tôi đọc rằng thao tác nhập trả lại lựa chọn đã hợp nhất của các phần tử tồn tại và cả các thành phần mới để hoạt động của trình điều khiển nên cập nhật thành phần hiện tại và đặt giá trị mới.

Tôi đang thiếu gì?

Answer 1

Tôi đã tìm thấy answer in this post

var circle = svg.selectAll("circle") 
    .data(data); 

circle.enter().append("circle") 
    .attr("r", 2.5); 

circle 
    .attr("cx", function(d) { return d.x; }) 
    .attr("cy", function(d) { return d.y; }); 

circle.exit().remove(); 

Câu trả lời là tôi cần phải gọi attr hành trên kết quả của selectAll.data chứ không phải là kết quả của các nhà điều hành append.

Answer 2

Có một ví dụ tại http://bl.ocks.org/1095795 cho thấy việc thêm và xóa các nút khỏi bố cục có hướng lực. Các liên kết và nút phải được xử lý riêng biệt và bố cục lực phải được khởi động lại.

function restart() { 
    var link = vis.selectAll("line.link") 
     .data(links, function(d) { return d.source.id + "-" + d.target.id; }); 

    link.enter().insert("svg:line", "g.node") 
     .attr("class", "link"); 

    link.exit().remove(); 

    var node = vis.selectAll("g.node") 
     .data(nodes, function(d) { return d.id;}); 

    var nodeEnter = node.enter().append("svg:g") 
     .attr("class", "node") 
     .call(force.drag); 

    nodeEnter.append("svg:image") 
     .attr("class", "circle") 
     .attr("xlink:href", "https://d3nwyuy0nl342s.cloudfront.net/images/icons/public.png") 
     .attr("x", "-8px") 
     .attr("y", "-8px") 
     .attr("width", "16px") 
     .attr("height", "16px"); 

    nodeEnter.append("svg:text") 
     .attr("class", "nodetext") 
     .attr("dx", 12) 
     .attr("dy", ".35em") 
     .text(function(d) { return d.id }); 

    node.exit().remove(); 

    force.start(); 
}