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

在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？谢谢！

解决方法

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

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

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

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

原文地址：https://www.jb51.cc/js/158568.html