D3コードでイベントハンドラーを処理するのに問題があります。リファクタリングする前は、意図したとおりに機能していました。
choice_groups
.append("span")
.attr("class", "repeat-choice")
.text("Modifica questa scelta")
.on("click", repeat_choice);
repeat_choice()関数は、span.repeat-choice要素のインデックスiパラメーターがクリックされた状態で呼び出されました。
このイベントハンドラーを複数のネストされたデータ要素を持つ要素にのみアタッチしたいので、上記のコードを次のようにリファクタリングしました。
choice_groups
.each(function(d, i) {
if(d.length > 1) {
d3.select(this)
.append("span")
.attr("class", "repeat-choice")
.text("Modifica questa scelta")
.on("click", repeat_choice);
} else {
d3.select(this)
.append("span")
.attr("class", "no-choice")
.html(" ");
}
});
ただし、repeat_choice()ハンドラー関数は、クリックされた要素のインデックスに関係なく、常にi=0で呼び出されるようになりました。
私はselection.each()を正しく使用していないと思います。結果のマークアップは期待どおりに(そしてリファクタリング前と同じように)、クリックハンドラー関数のみが要素のインデックスを渡されません。