Comment puis-je supprimer tous les éléments enfants d'un nœud, puis appliquer de nouveau avec une couleur différente et la taille?

J'ai donc du côté de la force de mise en page graphique de code pour la mise nœuds, liens et autres éléments:

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

Maintenant, les couleurs et la taille des dépendances changé et j'ai besoin de redessiner le graphique cercles (+ajouté tous les éléments) avec une couleur différente et le rayon. Avoir un problème avec elle.

Je peux le faire:

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

mais j'ai toutes les images que j'ai attaché à '.circles' toujours là.

En quelque sorte, toute aide sera appréciée, permettez-moi de savoir si l'explication n'est pas assez clair, je vais essayer de le réparer.

P. S. quelle est la différence entre graphData.nodes et d3.selectAll('.nodes')?

InformationsquelleAutor HotFrost | 2013-01-20
  1. 108

    Votre réponse va fonctionner, mais pour la postérité, ces méthodes sont plus génériques.

    Supprimer tous les enfants à partir de code HTML:

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

    Supprimer tous les enfants à partir de SVG/HTML:

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

    La .html("") appel fonctionne avec mon fichier SVG, mais il pourrait être un effet secondaire de l'utilisation de innerSVG.

    • Malheureusement .html("") ne fonctionne pas dans Safari. Fonctionne très bien dans tous les autres navigateurs.
    • voir stackoverflow.com/a/43661877/1587329 pour le moyen officiel pour ce faire
    InformationsquelleAutor Glenn
  2. 7

    Mon premier conseil est que vous devez lire le d3.js de l'API sur les sélections: https://github.com/mbostock/d3/wiki/Selections

    Vous devez comprendre comment le enter() commande fonctionne (API). Le fait que vous avez de l'utiliser pour gérer de nouveaux nœuds a un sens qui va vous aider.

    Ici est le processus de base lorsque vous traitez avec des selection.data():

    • d'abord, vous voulez "joindre" des données à la sélection. Donc, vous avez: 

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

    • Ensuite, vous pouvez modifier tous les nœuds à chaque fois que la donnée est modifiée (cela va faire exactement ce que vous voulez). Si par exemple vous changez le rayon de la vieille nœuds qui sont dans le nouveau jeu de données que vous avez chargé

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

    • Ensuite, vous avez à gérer de nouveaux nœuds, pour cela, vous devez sélectionner les nouveaux nœuds, c'est ce que selection.enter() est fait: 

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

    • Enfin, vous avez certainement envie d'enlever les nœuds que vous ne voulez plus, pour ce faire, vous devez les sélectionner, c'est ce que selection.exit() est faite pour. 

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

    Un bon exemple de l'ensemble du processus peut également être trouvé sur l'API wiki: https://github.com/mbostock/d3/wiki/Selections#wiki-exit

    • SALUT Chris, merci pour les suggestions et les points. Le fait est, que je n'ai pas de nouvelles données.. les Données toujours le même. Tout est la même. Je ne veux pas faire la force de l'ensemble du processus de nouveau. Comme je le comprends (corrigez-moi si je me trompe). Tout ce que j'ai à faire est de
    • tout ce que j'ai à faire est de trouver des éléments du dom avec '.cercle de classe et de leurs enfants. Les supprimer. Trouver les éléments svg avec".le nœud "de la classe et de réappliquer les "attacher" processus de svg cercles et autres effets visuels décrit dans 'applyvisualelements fonction, mais cette fois, lorsque le rayon sera calculé, il sera calculé différemment.
    • de toute manière, j'ai résolu très facilement, visualRoot.selectAll(".cercle").remove(); visualRoot.selectAll(".l'image").remove();
    InformationsquelleAutor Christopher Chiche
  3. 7

    de cette façon, j'ai résolu très facilement, 

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

    et puis j'ai juste rajouté des éléments visuels qui ont été rendus différemment parce que le code pour calculer le rayon et la couleur avait changé propriétés. Merci.

    InformationsquelleAutor HotFrost
  4. 4

    Si vous souhaitez supprimer l'élément lui-même, il suffit d'utiliser élément .remove(), comme vous l'avez fait. Dans le cas où vous souhaitez simplement supprimer le contenu de l'élément, mais de conserver l'élément, vous pouvez utiliser f.ex.

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

    au lieu de .html("") (je n'étais pas sûr que les enfants de l'élément que vous voulez supprimer). Cette maintient l'élément lui-même, mais nettoie tous les contenus inclus. Il l'officiel de la façon de le faire, donc si le travail de la croix-navigateur.

    PS: vous avez voulu changer le cercle tailles. Avez-vous essayé 

    d3.selectAll(".circle").attr("r", newValue);
    InformationsquelleAutor serv-inc
  5. 3

    De supprimer tout élément à partir d'un nœud:

    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]);
}
}`
    • Vous la couture de la de citer quelque chose, quelle est la source?
    • Avez-vous vraiment besoin de retirer tous ces nœuds, à partir de leurs propres nœuds. Sûrement le DOM méthode recommandée suffirait que les nœuds ne serait pas hors du nœud actuel n'a pas besoin d'être déchiré trop.
    • var element = document.getElementById("top"); while (element.firstChild) { element.removeChild(élément.firstChild); }
    InformationsquelleAutor