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

Question

d3で棒グラフを作成する。 30以上のバーがあり、x軸に30以上のラベルがあります。私は、ページがロードされている（これは動作している）ときにx軸のラベルを非表示にし、ユーザーが対応するバー（svg rectオブジェクト）にカーソルを合わせた場合にのみ表示します。これを行うために、私は各rectと各テキスト要素にIDを割り当てます。ユーザーが四角形の上にカーソルを置くと、選択された（マウスオーバーされた）矩形だけのテキストが表示されます。

私はidをrectに割り当てることはできますが、テキストには割り当てることはできません。コード：

 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を割り当てるにはどうすればよいですか？ありがとうございました！

Answer 1

問題は、x軸のティックにデータがバインドされていないため、dは定義されていません。実際にコードを実行するときにエラーメッセージが表示されるはずです。

このような場合、インデックスを使用して関連するデータ項目を取得することができます。

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

軸の数ティック場合にのみ動作することに注意してくださいは、データ項目の数と同じです。