0

100 個の数値のデータセットがあり、SVG 内で、以下のコードを使用してこれらの数値を表示するテキスト オブジェクトを作成します。

          svg.selectAll("text")
           .data(dataset)
           .enter()
           .append("text")
           .text(function(d) {
                console.log(output_format(d));
                return output_format(d);

これは完全に機能します。ただし、後でこのコードを使用して (d3.csv ブラケットの外側に) タイトルを作成しようとすると:

        svg.append("text")
          .text("Actual Labels")
          .attr("x", w/1.92)
          .attr("y", top_gap/1.5)
          .attr("class", "title");

次に、最初のデータポイントが消去され、console.log(output_format(d)); にも表示されません。ここで何が起こっていますか?どうすれば修正できますか?

4

1 に答える 1

1

他のコードは AJAX リクエストを待たなければならないため、単一のテキスト要素が最初に追加されます。したがって、残りのテキスト要素を追加するとき、1 つは既にそこにあります。この既存のテキスト要素は によって選択されselectAll("text")、 のデータと照合されdatasetます。デフォルトでは、d3 はインデックスに基づいてデータを照合します。配列の最初の要素は、すでに存在する最初の要素と一致するため、.enter()操作対象の選択範囲には含まれません。

これを修正する最も簡単な方法は、動的に追加するテキスト ラベルに別のクラスを与え、それに基づいて選択することです。つまり、動的ラベルを追加するコードは次のようになります

svg.selectAll("text.label")
       .data(dataset)
       .enter()
       .append("text")
       .attr("class", "label")
       .text(function(d) {
            console.log(output_format(d));
            return output_format(d);
       });

他の変更は必要ありません。

于 2013-03-29T08:57:08.960 に答える