D3: Обновить данные Вниз DOM

Question

У меня возникли проблемы с обновлением данных данных атрибута на дочерних узлах в DOM. Я использую SVG и привязываю массив данных к элементам родительской группы ('g'). Затем группы содержат круг и некоторый текст. Когда я сначала создаю круги, данные из родительского «g» автоматически передаются и привязаны к кругу. Я не могу понять, как обновить данные на узлах «круг» ребенка, когда я обновляю данные на родительских элементах «g».

Вот пример, чтобы объяснить, что я пытаюсь сделать:

var test = svg.selectAll("g").data([1,2,3,4]); 
test.enter().append("g"); 
test.append("circle"); 

Теперь у меня есть следующий DOM:

svg -> g (__data__ = 1) -> circle (__data__ = 1) 
     g (__data__ = 2) -> circle (__data__ = 2) 
     g (__data__ = 3) -> circle (__data__ = 3) 
     g (__data__ = 4) -> circle (__data__ = 4) 

Теперь я хочу, чтобы отобразить новые данные:

var test2 = svg.selectAll("g").data([9,8,7,6]); 

Что дает следующий DOM:

svg -> g (__data__ = 9) -> circle (__data__ = 1) 
     g (__data__ = 8) -> circle (__data__ = 2) 
     g (__data__ = 7) -> circle (__data__ = 3) 
     g (__data__ = 6) -> circle (__data__ = 4) 

Я не могу понять, как иметь дочерние окружные узлы наследуют значения данных своих родительских g-элементов.

Я пробовал такие вещи, как следующий без успеха:

test2.selectAll("circle").data(function(d) { return d; }) 

и

test2.selectAll("circle").data(function(d) { return this.parentNode.__data__; }) 

Кто-нибудь есть предложения, как это достигается?

Answer 1

Оператор .select(), помимо выбора одного элемента, также распространяет данные от текущего элемента на выбранный элемент. Вы можете использовать это для ваших целей, если каждый g элемента содержит только один circle элемента, запустив

test2.select("circle"); 

Это не будет работать так хорошо, если есть более чем один circle, хотя, как вам нужно будет выбрать каждый из них индивидуально.