私は D3.js を使用しており、一般的な更新パターンを学習しています。
単純なデータ構造については理解していますが (私はそう思います!)、入れ子になった DOM 要素のセット (パスとテキスト要素を含むグループ) を作成したいと考えています。ネストされた要素 の更新/開始/終了の選択にアクセスする方法がわかりません。
要約すると、これは最終的に作成したい SVG 構造です。
<g class="team">
<path class="outer" d="..."></path>
<text class="legend" x="890" dy=".2em" y="23">Red Sox</text>
</g>
<g class="team">
<path class="outer" d="..."></path>
<text class="legend" x="890" dy=".2em" y="23">Yankees</text>
</g>
そして、各要素で明示的に更新/入力/選択の選択にアクセスできるようにしたいと思います。私のデータは次のようになります。
[
{ "name": "Red Sox", "code": "RED", "results": [...] },
{ "name": "Yankees", "code": "YAN", "results": [...] },
]
これが私のコードです - jsfiddle で全文を参照してください: http://jsfiddle.net/e2vdt/6/
function update(data) {
// Trying to follow the general update pattern:
// http://bl.ocks.org/mbostock/3808234
// Join new data with old elements, if any.
var g = vis.selectAll("g.team").data(data, function(d) {
return d.code;
});
// Update old elements as needed.
// QUESTION: How to get the update selection for the text elements?
// Currently the text element is not moving to the right position.
g.selectAll("text.legend").transition()
.duration(750)
.attr("y", function(d, i) { return i * 32 + 100; });
// Create new elements as needed.
var gEnter = g.enter()
.append("g").attr("class","team");
gEnter.append("text").attr("class", "legend")
.attr("dy", ".35em")
.attr("y", function(d, i) { return i * 32 + 100; })
.attr("x", "20")
.style("fill-opacity", 1e-6)
.text(function(d) { return d.name; })
.transition()
.duration(750)
.style("fill-opacity", 1);
// TBA: Add path element as well.
// Remove old elements as needed.
g.exit()
.transition()
.duration(750)
.attr("y", "0")
.style("fill-opacity", 1e-6)
.remove();
}
開始選択と終了選択はどちらも正常に機能していますが、更新選択を取得する方法がわからないため、テキスト ラベルを正しい位置に移動できます。「レッドソックス」のエントリはページの下に移動するはずですが、そうではありません。