title: Reordering svg dom with d3js
body: <p>I'm using d3 to render an svg.  I have an array of objects, each with a color property, like so:</p>
  
  <pre><code>data = [{'color': 'red'}, {'color': 'blue'}];
  </code></pre>
  
  <p>I have an update function to draw circles with those colors, like so:</p>
  
  <pre><code>function update(data) {
      var circle = svg.selectAll('circle').data(data, function(d) {return d.color})
          .enter()
          .append('circle').attr('r', 50)
          .attr('cx', function (d, i) {return 50 + (i * 50)}).attr('cy', 50)
          .attr('fill', function (d) {return d.color});
      circle.order();
  }
  </code></pre>
  
  <p>My understanding is that the last line in the function, circle.order(), should reorder the nodes in the svg dom to match the order of the data.  However, I change the array order and call the update function again, and it doesn't seem to do anything.</p>
  
  <p>jsfiddle demo: <a href="http://jsfiddle.net/du7mh/" rel="nofollow">http://jsfiddle.net/du7mh/</a></p>
  
  <p>I need to control the dom order to bring certain elements to the foreground, since there's no z-index in svg.  Any help would be appreciated, thanks!</p>