9

現在、各バーの上にバーの値が関連付けられているグラフがありますが、各テキスト要素の幅を取得できないため、値のラベルを中央に配置するのが困難です。

これが私のグラフが現在どのように描いているかです：

ここに画像の説明を入力してください

私がする必要があるのは、各テキスト要素の幅の半分を引くことだけですが、次のCoffeescriptではそうすることができないようです。

    #Drawing value labels   
    svg.selectAll("rect")
        .data(data)
        .enter()
        .append("text")
        .text((d)-> d.Total)
        .attr("width", x.rangeBand())
        .attr("x", (d)->
            textWidth = d3.selectAll("text").attr("width")

            x(d.Year) + (x.rangeBand() / 2) - (textWidth / 2)
        )
        .attr("y", (d)-> y(d.Total) - 5)
        .attr("font-size", "10px")
        .attr("font-family", "sans-serif")

    #Drawing bars       
    svg.selectAll("rect")
        .data(data)
        .enter().append("rect")
        .attr("class", "bar")
        .attr("x", (d)-> x(d.Year))
        .attr("width", x.rangeBand())
        .attr("y", (d)-> y(d.Total))
        .attr("height", (d)-> height - y(d.Total))

各テキスト要素のwidth属性にアクセスして、オフセットする値を設定する方法はありますか？

4

2 に答える 2

8

おそらくもっと簡単な方法は、バーの左側にバーの幅の半分を加えたものに設定されたtext-anchorofmiddleを使用することです。x

svg.selectAll(".bar-label")
  .data(data)
.enter().append("text")
  .text((d)-> d.Total)
  .attr("class", "bar-label")
  .attr("text-anchor", "middle")
  .attr("x", (d)-> x(d.Year) + x.rangeBand()/2)
  .attr("y", (d)-> y(d.Total) - 5)
于 2016-03-26T00:32:23.110 に答える
4

テキストのバウンディングボックスを取得し、それらの値を使用して、テキストを中央に配置するための変換を適用できます。バウンディングボックスを取得する例はここにあります。コードは次のようになります

.text(function(d) { return d.Total; })
.attr("x", function(d) {
   return x(d.Year) + (x.rangeBand() / 2) - (this.getBBox().width / 2);
}
...
于 2013-03-22T18:49:30.610 に答える