Question

我很难确定svg文本元素的边界框的起始坐标，该边界框对应于D3.js序数x轴的标签。

从当前代码中，文本标签DOM节点x属性的值为0.但是标签文本已翻译。因此，我将使用svg.selectAll（“g.x.axis 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"))

确定d3轴中文本标签的坐标

0 个答案: