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

Question

在d3中制作条形图.我有30多个条形,x轴上有30多个相应的标签.我希望在页面加载时隐藏x轴标签(这是有效的),只有当用户游标在相应的栏(svg rect对象)上时才显示.为此,我为每个rect和每个文本元素分配一个id.当用户游标超过rect时,仅显示所选(鼠标悬停)矩形的文本.

我可以为rects分配id,但不能为text分配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

问题是没有数据绑定到x轴标记,因此d未定义 - 运行代码时实际上应该收到错误消息.

在这种特殊情况下,您可以使用索引来获取相关的数据项.

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

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