13

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

4

1 回答 1

23

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

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

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

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

于 2013-10-15T18:05:58.963 回答