Come aggiornare gli elementi del layout di forza D3 quando i dati sottostanti cambiano

Question

Sto utilizzando uno degli esempi di layout forza (http://bl.ocks.org/1153292) per mostrare una rete sul mio sito web.

Consente all'utente di scegliere il tipo di collegamenti da visualizzare in qualsiasi momento. Ho notato che quando scelgo di vedere il tipo di collegamento A, quindi aggiungo il tipo di collegamento B e quindi rimuovo il tipo di collegamento A i collegamenti rimanenti di tipo B sono presentati con i colori A.

Questo è il codice che viene eseguito per aggiungere i collegamenti al diagramma svg. Sto modificando l'array this.links aggiungendo e rimuovendo i collegamenti da esso. Come potete vedere ho impostato l'attributo di classe, ma non è l'aggiornamento - rimane di tipo di collegamento 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 + ")"; }); 

Attualmente lavoro a questo problema aggiornando l'attributo class all'interno della funzione tick ma questo fuori rotta causa molto lavoro non necessario.

Ho letto che l'operazione di invio restituisce una selezione unita degli elementi esistenti e anche di quelli nuovi in ​​modo che l'operazione attr aggiorni quella esistente e imposta quella nuova.

Cosa mi manca?

Answer 1

ho trovato il 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(); 

La risposta è che ho bisogno di chiamare attr operatore sul risultato di selectAll.data e non sul risultato dell'operatore accodamento.

Answer 2

C'è un esempio su http://bl.ocks.org/1095795 che mostra l'aggiunta e la rimozione di nodi da un layout forzato. I collegamenti e i nodi devono essere gestiti separatamente e quindi il layout della forza deve essere riavviato.

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