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; });

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

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

1 个答案: