13

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

4

1 に答える 1