如何在 d3 javascript 中为 SVG 文本元素分配唯一 id

在 d3 中制作条形图。我有 30 多个条形图，x 轴上有 30 多个相应标签。我希望在页面加载时隐藏 x 轴标签（这是有效的），并且仅当用户将光标悬停在相应的栏（svg 矩形对象）上时才出现。为此，我为每个矩形和每个文本元素分配一个 id。当用户将光标悬停在矩形上时，将仅显示所选（鼠标悬停）矩形的文本。

我可以将 id 分配给矩形，但不能分配给文本。代码：

      svg.selectAll("rect")
         .data(dataset)
         .enter()
         .append("rect")
            .attr("id", function(d){   
                return d.slug;        // slug = label downcased, this works
            });                       // each rect has unique id

但是，x 轴上的文本元素的类似代码没有分配 id？！

    svg.append("g")
      .call(xAxis)
      .selectAll("text")
        .attr("id", function (d){    // inspect text element shows no ID.
           return d.slug;            // text doesn't have any id
        })
     .style("text-anchor", "end")
     .attr("opacity", 0.2);

如何为 x 轴上的文本元素分配唯一的 id？谢谢你！

问题是没有数据绑定到 x 轴刻度，因此d未定义——运行代码时您实际上应该收到一条错误消息。

在这种特殊情况下，您可以使用索引来获取相关数据项，如下所示。

svg.append("g").call(xAxis)
   .selectAll("text")
   .attr("id", function(d, i) { return dataset[i].slug; });

请注意，只有当轴刻度数与数据项数相同时，这才有效。