web-dev-qa-db-ja.com

d3javascriptのSVGテキスト要素に一意のIDを割り当てる方法

D3で棒グラフを作成します。 30以上のバーがあり、x軸に30以上の対応するラベルがあります。ページが読み込まれたときにx軸ラベルを非表示にし（これは機能しています）、ユーザーが対応するバー（svg rectオブジェクト）にカーソルを合わせた場合にのみ表示されるようにします。これを行うために、各rectと各text要素にIDを割り当てています。ユーザーがrectにカーソルを合わせると、選択した（マウスオーバーした）rectにのみテキストが表示されます。

IDをrectsに割り当てることはできますが、textには割り当てることができません。コード：

      svg.selectAll("rect")
         .data(dataset)
         .enter()
         .append("rect")
            .attr("id", function(d){   
                return d.slug;        // slug = label downcased, this works
            });                       // each rect has unique id

ただし、x軸のテキスト要素の同様のコードはIDを割り当てませんか？！

    svg.append("g")
      .call(xAxis)
      .selectAll("text")
        .attr("id", function (d){    // inspect text element shows no ID.
           return d.slug;            // text doesn't have any id
        })
     .style("text-anchor", "end")
     .attr("opacity", 0.2);

X軸のテキスト要素に一意のIDを割り当てるにはどうすればよいですか？ありがとうございました！

javascriptjquerysvgd3.js
12
DeBraid

問題は、x軸の目盛りにデータがバインドされていないため、dが未定義であるということです。コードの実行時に実際にエラーメッセージが表示されるはずです。

この特定のケースでは、インデックスを使用して、そのように関連するデータ項目を取得できます。

svg.append("g").call(xAxis)
   .selectAll("text")
   .attr("id", function(d, i) { return dataset[i].slug; });

これは、軸の目盛りの数がデータ項目の数と同じである場合にのみ機能することに注意してください。

20
Lars Kotthoff