获取轴文本元素的属性 x答案

【问题标题】：Get attribute x for axis' text element获取轴文本元素的属性 x
【发布时间】：2021-02-28 19:32:16
【问题描述】：

我使用 d3.axisBottom() 创建了一个 XAXIS。现在我需要将位置（刻度文本的 x 和 y 属性）存储在一个单独的变量中。

我的完整代码在 codepen https://codepen.io/zubair57/pen/gOLeeOm

当我使用下面的代码获取“x 和 y”属性时，我得到 y 属性的值，但 x 属性为 null。你能告诉我为什么 x attr 为 null 以及如何获得正确的值

d3.select(".xaxis").selectAll(".tick text").each(function(d,i){
    let me=d3.select(this)  
    console.log(me.attr("x"))
    console.log(me.attr("y"))
})

【问题讨论】：

标签： javascript svg d3.js

【解决方案1】：

在 D3 中，轴生成器创建了几个沿 x 轴平移的组（在 d3.axisBottom() 的情况下），然后文本只有 y 位置集。例如，在您的轴上：

<g class="tick" opacity="1" transform="translate(50.5,0)">
<!-- x translated here ---------------------------^  -->
    <line stroke="currentColor" y2="0" style="stroke: black; stroke-width: 2;"></line>
    <text fill="currentColor" y="3" dy="0.71em" style="fill: black; font-size: 20px; font-family: Arial;">1</text>
</g>
etc...

因此，没有要获取的x 属性。

要获得文本的x 位置，您必须选择它们的父级，即this.parentNode。但是，使用 getBBox() 之类的方法将不起作用，因为元素已被翻译。您可以在 v3 中使用 d3.transform()，但在 D3 v4 及更高版本中已将其删除。如需解决方法，请查看此答案：https://stackoverflow.com/a/38230545/5768908

【讨论】：