d3で棒グラフを作る。30 以上のバーがあり、x 軸に 30 以上の対応するラベルがあります。ページの読み込み時に x 軸のラベルを非表示にし (これは機能しています)、ユーザーが対応するバー (svg rect オブジェクト) にカーソルを合わせた場合にのみ表示されるようにします。これを行うために、各四角形と各テキスト要素に ID を割り当てています。ユーザーが四角形にカーソルを合わせると、選択された (マウスオーバーされた) 四角形に対してのみテキストが表示されます。
id を四角形に割り当てることはできますが、テキストには割り当てることができません。コード:
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 を割り当てるにはどうすればよいですか? ありがとうございました!