title: D3 Accessing node attributes inside array
body: <p>I'm new to D3 and I'm trying to set the attributes for some bars inside a bar chart. I select all the rects with <code>d3.selectAll("rect")</code> and store them in an array (an array of arrays actually). Then I slice the sub-array to store only the rects and when I try to set their attributes I get an <code>.attr is not a function</code> error. I guess it is related to the array items not being svg nodes but I don't know how to solve it. </p>
  
  <p>Here is the code:</p>
  
  <pre><code>.on("mouseover", function(d, index) {
    var allBars = d3.select("#chart").selectAll("rect");
    var leftBars = [];
    var rightBars = [];
  
    leftBars = allBars[0].slice(0, index);
    rightBars = allBars[0].slice(index+1);
  
    for (i = 0; i &lt; leftBars.length; i++) {
      leftBars[i].attr("transform", "translate(-20, 0)");
    }
  
    for (i = 0; i &lt; rightBars.length; i++) {
      rightBars[i].attr("transform", "translate(20, 0)");
    }
  });
  </code></pre>