Les éléments enfants n'ont pas hérité des données parentes avec la disposition des forces D3

Question

J'ai créé une disposition de force d3 et fonctionne très bien. Mon principalement le code comme ceci:.

var nodes = [{id:1, n:'n_1',np:'0'},{id:2, n:'n_2',np:'0'}];//just for demo 
//1. set data 
var update = svg.selectAll(".node").data(nodes); 
//2. enter 
update.enter().append("svg:g").attr("class", "node") 
.call(function(p){ 
    p.append("svg:image").attr("class", "nodeimage"); 
    p.append("svg:text").attr("class", "nodetext"); 
}); 
//3. exit 
update.exit().remove(); 

Comme on le sait nous, d3.selectAll ("noeud") des données() Mes données. Étant donné que les éléments enfants de g hériteront des données provenant des données parentes, d3.selectAll(".nodeimage").data() est également mes données.Ai-je raison?

En fait, mes nœuds de données proviennent du backend et les données sont mises à jour. Par exemple, certaines propriétés telles que np ont été modifiées de 0 à 1. Nous considérons que le résultat est nodes = [{id:1, n:'n_1',np:'1'},{id:2, n:'n_2',np:'0'}];

Je dois rappeler la fonction ci-dessus. Cependant, d3.selectAll(".node").data() est correct, alors que d3.selectAll(".nodeimage").data() est faux maintenant.

Le code suivant ne fonctionnera pas correctement.

d3.selectAll('.nodeimage').attr("test", function(d){ 
    //d.np is a wrong value. 
}); 

Des suggestions pour moi?

Voici ma démo de jsFiddle: http://jsfiddle.net/bpKG4/663/

Answer 1

Ceci est un comportement étrange de d3. Si je comprends bien (ce qui n'est pas accordé), selection.data(...) transfère automatiquement les données aux éléments enfants, à moins qu'ils aient déjà des données liées.

Dans votre cas, cela signifie que vous devez copier « manuellement » les données à chaque enfant:

//select any child node, then: 
    .each(function() { 
     d3.select(this).datum(d3.select(this.parentNode).datum()); 
    }) 

NB: dans votre violon, vous définissez seulement le xlink:href dans la sélection enter(): c'est faux, vous devez le définir dans l'ensemble update sélection.

update.selectAll(".nodeimage") 
      .each(function() { 
      d3.select(this).datum(d3.select(this.parentNode).datum()); 
      }) 
      .attr("xlink:href", function(d){ 
      var img; 
      if(d.np == 1){ 
       img = "http://www.gravatar.com/avatar/1eccef322f0beef11e0e47ed7963189b/?default=&s=80" 
      }else{ 
       img = "http://www.gravatar.com/avatar/a1338368fe0b4f3d301398a79c171987/?default=&s=80"; 
      } 
      return img; 
      }); 

Voir ici: http://jsfiddle.net/cs4xhs7s/1/