Jak zaktualizować elementy układu sił D3, gdy zmieniają się dane podstawowe

Question

Używam jednego z przykładów układów sił (http://bl.ocks.org/1153292) do pokazania sieci na mojej stronie internetowej.

Pozwalam użytkownikowi na wybór typu linków, które można zobaczyć w dowolnym momencie. Zauważyłem, że gdy wybieram link typu A, dodam typ łącza B, a następnie usuwam typ łącza A, pozostałe łącza typu B mają kolory A.

To jest kod, który uruchamia się, aby dodać linki do diagramu SVG. Zmieniam tablicę this.links, dodając i usuwając z niej linki. Jak widać ustawić atrybut klasy, ale to nie jest aktualizacją - to pozostaje od rodzaju łącza 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 + ")"; }); 

Obecnie obejść ten problem, aktualizując atrybut klasy wewnątrz funkcji kleszcza, ale to z kursu przyczynę dużo niepotrzebnej pracy.

Przeczytałem, że operacja enter zwraca połączony wybór elementów istniejących, a także nowych, aby operacja attr zaktualizowała istniejący i ustawiła nowy.

Czego mi brakuje?

Answer 1

Znalazłem 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(); 

Odpowiedzią jest to, że muszę zadzwonić w ciekawy operatora na skutek selectAll.data a nie na skutek operatora dopisywania.

Answer 2

Istnieje przykład pod adresem http://bl.ocks.org/1095795, który pokazuje dodawanie i usuwanie węzłów z układu ukierunkowanego na siłę. Łącza i węzły muszą być obsługiwane osobno, a następnie należy ponownie uruchomić układ sił.

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(); 
}