title: Path in SVG placed in front of the circles in D3 chart, despite the order of append
body: <p>My data line is supposed to be put <strong>behind</strong> the circles but refuses stubbornly to do so. First I thought it had to do with the order of appending but, apparently, it doesn't. And I've learned that <a href="https://stackoverflow.com/questions/29282120/how-can-i-get-this-svg-circle-to-appear-above-my-d3-path-and-not-below">others</a> had a similar issue too. I'd like the dots to look like <a href="http://www.clipular.com/c/5787996821913600.png?k=5XLH2JZGPdTdeICEfnI2vUm0pnc" rel="nofollow noreferrer">this picture</a>.</p>
  
  <p>I've noticed that <strong>the last circle</strong> actually behaves as expected. It gets behind the line if I append the set of circles first and it gets in front in the opposite case. But all the other data points don't obey the same logic.</p>
  
  <p>Generally, I'll be creating charts with more than a single data point, so it's going to be a problem...</p>
  
  <p>What am I missing in <a href="https://jsfiddle.net/Chamster/0yxo1wyz/" rel="nofollow noreferrer">my chart</a>?</p>
  
  <pre><code>gees.append("path")
    .attr("d", d3.svg.line().x(posX).y(posY)(data));
  gees.append("circle")
    .attr({ cx: posX, cy: posY, r: dotSize });
  </code></pre>
  
  <p>As a <strong>secondary</strong> question, as I'm starting with D3 just now, I'll gladly accept comments on my approach of data binding and structuring the element creation and manipulation, should a viewer recognize some code smell.</p>