Come rimuovo tutti gli elementi figli da un nodo e poi li riapplico con colori e dimensioni differenti?

Quindi ho il prossimo codice grafico del layout di forza per l'impostazione di nodi, collegamenti e altri elementi:

var setLinks = function ()
{
    link = visualRoot.selectAll("line.link")
        .data(graphData.links)
        .enter().append("svg:line")
        .attr("class", "link")
        .style("stroke-width", function (d) { return nodeStrokeColorDefault; })
        .style("stroke", function (d) { return fill(d); })
        .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; });

    graphData.links.forEach(function (d)
    {
        linkedByIndex[d.source.index + "," + d.target.index] = 1;
    });
};


var setNodes = function ()
{
    node = visualRoot.selectAll(".node")
        .data(graphData.nodes)
        .enter().append("g")
        .attr("id", function (d) { return d.id; })
        .attr("title", function (d) { return d.name; })
        .attr("class", "node")
        .on("click", function (d, i) { loadAdditionalData(d.userID, this); })
        .call(force.drag)
        .on("mouseover", fadeNode(.1)).on("mouseout", fadeNode(1));
};

//append the visual element to the node
var appendVisualElementsToNodes = function ()
{
    node.append("circle")
        .attr("id", function (d) { return "circleid_" + d.id; })
        .attr("class", "circle")
        .attr("cx", function (d) { return 0; })
        .attr("cy", function (d) { return 0; })
        .attr("r", function (d) { return getNodeSize(d); })
        .style("fill", function (d) { return getNodeColor(d); })
        .style("stroke", function (d) { return nodeStrokeColorDefault; })
        .style("stroke-width", function (d) { return nodeStrokeWidthDefault; });

    //context menu:
    d3.selectAll(".circle").on("contextmenu", function (data, index)
    {
        d3.select('#my_custom_menu')
          .style('position', 'absolute')
          .style('left', d3.event.dx + "px")
          .style('top', d3.event.dy + "px")
          .style('display', 'block');

        d3.event.preventDefault();
    });
    //d3.select("svg").node().oncontextmenu = function(){return false;};

    node.append("image")
        .attr("class", "image")
        .attr("xlink:href", function (d) { return d.profile_image_url; })//"Images/twitterimage_2.png"
        .attr("x", -12)
        .attr("y", -12)
        .attr("width", 24)
        .attr("height", 24);

    node.append("svg:title")
        .text(function (d) { return d.name + "\n" + d.description; });
};

Ora, i colori e le dipendenze delle dimensioni sono cambiati e ho bisogno di ridisegnare i cerchi del grafico (+ tutti gli elementi aggiunti) con colori e raggi diversi. Avendo problemi con esso.

Posso farlo:

visualRoot.selectAll(".circle").remove();

ma ho tutte le immagini a cui ho allegato '.circles'ancora lì.

In ogni caso qualsiasi aiuto sarà apprezzato, fatemi sapere se la spiegazione non è abbastanza chiara, cercherò di rimediare.

PS qual è la differenza tra graphData.nodes e d3.selectAll('.nodes')?

La tua risposta funzionerà, ma per i posteri questi metodi sono più generici.

Rimuovi tutti i bambini dall'HTML:

d3.select("div.parent").html("");

Rimuovi tutti i bambini da SVG / HTML:

d3.select("g.parent").selectAll("*").remove();

La .html("")chiamata funziona con il mio SVG, ma potrebbe essere un effetto collaterale dell'utilizzo di innerSVG .

Il mio primo consiglio è che dovresti leggere l' d3.jsAPI sulle selezioni: https://github.com/mbostock/d3/wiki/Selections

Devi capire come funziona il enter()comando ( API ). Il fatto che tu debba usarlo per gestire nuovi nodi ha un significato che ti aiuterà.

Ecco il processo di base quando ti occupi di selection.data():

• per prima cosa si vuole "allegare" alcuni dati alla selezione. Quindi hai:

    var nodes = visualRoot.selectAll(".node")
        .data(graphData.nodes)
  

• Quindi puoi modificare tutti i nodi ogni volta che i dati vengono modificati (questo farà esattamente quello che vuoi). Se ad esempio modifichi il raggio dei vecchi nodi che si trovano nel nuovo set di dati che hai caricato

    nodes.attr("r", function(d){return d.radius})
  

• Quindi, devi gestire nuovi nodi, per questo devi selezionare i nuovi nodi, questo è ciò selection.enter()per cui:

    var nodesEnter = nodes.enter()
        .attr("fill", "red")
        .attr("r", function(d){return d.radius})
  

• Infine sicuramente vuoi rimuovere i nodi che non vuoi più, per fare questo, devi selezionarli, questo è ciò per cui selection.exit()è fatto.

    var nodesRemove = nodes.exit().remove()
  

Un buon esempio dell'intero processo può essere trovato anche sul wiki dell'API: https://github.com/mbostock/d3/wiki/Selections#wiki-exit

in questo modo l'ho risolto molto facilmente,

visualRoot.selectAll(".circle").remove();
visualRoot.selectAll(".image").remove();

e poi ho semplicemente aggiunto di nuovo gli elementi visivi che sono stati renderizzati in modo diverso perché il codice per il calcolo del raggio e del colore aveva cambiato proprietà. Grazie.

Se vuoi rimuovere l'elemento stesso, usa semplicemente element.remove(), come hai fatto. Nel caso in cui desideri semplicemente rimuovere il contenuto dell'elemento, ma mantenere l'elemento così com'è, puoi usare f.ex.

visualRoot.selectAll(".circle").html(null);
visualRoot.selectAll(".image").html(null);

invece di .html("")(non ero sicuro di quali elementi secondari dell'elemento desideri eliminare). Ciò mantiene l'elemento stesso, ma pulisce tutto il contenuto incluso . È il modo ufficiale per farlo , quindi dovrebbe funzionare su più browser.

PS: volevi cambiare le dimensioni del cerchio. Hai provato

d3.selectAll(".circle").attr("r", newValue);

Per rimuovere tutti gli elementi da un nodo:

var siblings = element.parentNode.childNodes;
for (var i = 0; i < siblings.length; i++) {
    for (var j = 0; j < siblings.length; j++) {
        siblings[i].parentElement.removeChild(siblings[j]);
    }
}`