d3.js - 为各个轴文本元素分配 ID

Question

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

Answer 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/等，但我想确保在这里给出答案以防万一有人正在寻找如何做这种事情。

Answer 2

棘手的部分是你不会提前知道你有什么刻度或有多少（除非你在你的轴上使用 tickValues 属性）。

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

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

axisGroup.call(axis);

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

axisGroup.selectAll('.tick');

或所有文本标签：

axisGroup.selectAll('text');