为各个轴文本元素分配 ID

Posted 2023-02-22

【中文标题】为各个轴文本元素分配 ID

【英文标题】：Assign IDs to Individual Axis Text Elements

【发布时间】：2012-10-01 07:05:21

【问题描述】：

我正在使用 d3.axis() 创建轴标签和刻度线，我想使用 d3.select("#axisTextIDValue") 单独引用它们，但我看不到任何方法来操作单个的 id 属性轴中的文本元素。有谁知道如何为轴的刻度或文本元素创建 ID 值？

【参考方案1】：

虽然其他答案确实解释了如何选择刻度，但如果您想为此类生成的元素分配唯一的 id，您可以使用子选择通过为您调用的 g 提供 id 或类来实现轴，然后根据它们的数组位置为子文本元素设置 id：

 d3.select("svg").append("g").attr("id", "axisG").call(axis);
 d3.select("#axisG").selectAll("text").attr("id", function(d,i) return "axisText" + i);

 d3.select("#axisText0").node(); //demonstrates selectability

也就是说，这可能不是一个好主意，并且有更好的方法来处理由 D3 即时生成的刻度/标签/voronoi/等，但我想确保放置一个在这里回答以防万一有人正在寻找如何做这种事情。

【讨论】：

非常适合我的硒测试！

【参考方案2】：

其中棘手的部分是您不会提前知道您有哪些刻度或有多少刻度（除非您在轴上使用 tickValues 属性）。

一般而言，您可以对创建轴的组进行分类，并将其用作进一步选择的基础。例如

var axisGroup = parent.append('g')
                .attr('class', 'axis')

axisGroup.call(axis);

我相信刻度线被分配了“刻度线”类，因此您可以选择所有刻度线：

axisGroup.selectAll('.tick');

或所有文字标签：

axisGroup.selectAll('text');