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

Question

在 d3 中制作条形图。我有 30 多个条，x 轴上有 30 多个对应的标签。我希望在页面加载时隐藏 x 轴标签(这是有效的)，并且仅当用户将光标悬停在相应的栏(svg rect 对象)上时才会出现。为此，我为每个矩形和每个文本元素分配了一个 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？谢谢!

Answer 1

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

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

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

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