0

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

从当前代码来看，文本标签 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"))
4

0 回答 0