d3.js - 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__; })

これがどのように達成されるかについて誰か提案がありますか?