0

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（）を正しく使用していないと思います。結果のマークアップは期待どおりに（そしてリファクタリング前と同じように）、クリックハンドラー関数のみが要素のインデックスを渡されません。

4

1 に答える 1

2

内部のd3.select（）は新しい選択を作成しているため、毎回i = 0をリセットします（その選択のコンテキストで）。条件付きで属性を設定できます。

choice_groups
  .append("span")
  .attr("class", function(d,i) { return d.length > 1 ? "repeat-choice" : "no-choice"; })
  .text(function(d,i) { return d.length > 1 ? "Modifica questa scelta" : null; });

または、「repeat-choice」要素のみを再選択して、後でクリック処理をバインドします。

choice_groups
    .filter(function(d,i){ return d.length > 1;})
    .on("click", repeat_choice);

（repeat_choiceに渡したiは、この2番目の選択でもフィルター処理された要素のみをカウントすると思います）

お役に立てば幸いです。

于 2013-02-22T08:03:18.580 に答える