Skip to content

D3 get attributes from element

I am trying some basic d3 and i have been trying to get the attributes of each of the rect using d3 but I am not able to get anything.

Console Screen

When i try d3.selectAll("rect"), I get


How do can i access attributes of rect by using something like d3.selectAll("rect").select("part1").attr(...) or something similar? I want to access different attributes of all rect.



You can get any attribute of an element using a getter:"bar")

Which is basically the attr() function with just one argument.

Here is a demo. There are two classes of rectangles, part1 and part2. I’m selecting all part1 rectangles and getting their x positions:

var svg ="svg");
var rects = svg.selectAll(null)
  .attr("fill", "teal")
  .attr("y", 20)
  .attr("x", d => 10 + 12 * d)
  .attr("height", 40)
  .attr("width", 10)
  .attr("class", d => d % 2 === 0 ? "part1" : "part2");

d3.selectAll(".part1").each(function(d,i) {
  console.log("The x position of the rect #" + i + " is " +"x"))
<script src=""></script>