D3选择svg对象中的多个元素

Question

我有一个条形图，我正在添加一些标签（在已经创建了条形图之后），如下所示：

svg.selectAll("text").data(labels).enter().append("text").text(function(d) { return d; })
.attr("text-anchor", "middle")
.attr("x", parseFloat(d3.selectAll("#bar").attr("x")) + 
           parseFloat(d3.selectAll("#bar").attr("width"))/2)
.attr("y", 90);

};
//when I am creating the bars using selectAll("rect").... at the end of the attr()
//function I have specified an id called bar so I can reference it later that way.

但是这只选择第一个条形并将所有标签放在彼此的顶部。为什么这样，我如何选择svg中的所有矩形？

Answer 1

#bar是id selector，每个ID在文档中必须是唯一的，否则您的文件无效。

如果你想要多个名为bar的元素，你可以给它们一个bar类，然后使用class selector代替。

如果您想选择所有<rect>元素，则可以使用type selector。