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

Question

I've got a bar chart and I'm putting in some labels (after already having created the bars) like this:

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.

But this only selects the first bar and puts all labels on top of each other. Why is that and how can I select all the rectangles in the svg?

Answer 1

#bar is an id selector and every id must be unique within a document or your file isn't valid.

If you want to have multiple elements called bar you could give them a class of bar and then use a class selector instead.

If you want to select all <rect> elements then you could use a type selector .