Детские элементы не наследовали родительские данные с компоновкой силы D3

Question

Я создал схему силы d3 и отлично работает. Мой основном код следующим образом:.

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

Как нам известно, d3.selectAll ("узел") данные() мои данные. Поскольку дочерние элементы g наследуют данные от родительских данных, d3.selectAll(".nodeimage").data() также является моими данными. Я прав?

Фактически, мои узлы данных находятся из бэкэнд, а данные обновляются. Например, некоторые свойства, такие как np, были изменены с 0 на 1. Мы рассмотрим результат: nodes = [{id:1, n:'n_1',np:'1'},{id:2, n:'n_2',np:'0'}];

Мне нужно снова вызвать функцию выше. Однако d3.selectAll(".node").data() прав, а d3.selectAll(".nodeimage").data() не прав.

Следующий код не будет работать.

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

Любые предложения для меня?

Вот мой демо jsfiddle: http://jsfiddle.net/bpKG4/663/

Answer 1

Это странное поведение d3. Если я правильно понимаю (что не предоставляется), selection.data(...) автоматически передает данные дочерним элементам, если только они уже не привязаны к некоторым данным.

В вашем случае, это означает, что вам нужно скопировать «вручную» данные для каждого ребенка:

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

NB: в вашей скрипке, вы только установить xlink:href в выборе enter(): это неправильно, вам нужно установить его в пределах всего выбора update.

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

Смотрите здесь: http://jsfiddle.net/cs4xhs7s/1/