svg - d3 軸でのテキスト ラベルの座標の決定

Question

D3.js 序数 x 軸のラベルに対応する svg テキスト要素の境界ボックスの開始座標を決定するのが困難です。

現在のコードから、テキスト ラベルの DOM ノード x 属性の値は 0 です。ただし、ラベル テキストは翻訳されています。したがって、svg.selectAll("gxaxis g.tick.major").attr("transform") を使用して、ラベル要素の変換属性を決定します。これらの戻り値の情報を収集できたと思います。これにはもっと簡単な方法がありますか？

コードの DOM 要素の例を次に示します。

<g class="tick major" transform="translate(73.33333333333333,0)" style="opacity: 1;"><line y2="6" x2="0">
    <line y2="6" x2="0"></line>
    <text y="9" x="0" dy=".71em" style="text-anchor: middle;">banana</text>
</g>

私のスクリプト：

var margin = {top: 100, right: 100, bottom: 100, left: 100},
    width = 310 - margin.left - margin.right,
    height = 200 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .domain(["apple", "orange", "banana", "grapefruit"])
    .rangePoints([0, width]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var svg = d3.select("body")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)   
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
    .attr("class", "x axis")
    .call(xAxis); 

console.log(svg.selectAll("g.x.axis g.tick.major")
    .attr("transform"))