title: svg: How to set a circle on the calculated line?
body: <p>I'm trying to set a circle on the calculated line with svg.</p>
  
  <p>Here is my the example: <a href="http://jsfiddle.net/7XC9j/" rel="nofollow">http://jsfiddle.net/7XC9j/</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;svg width="300" height="500"&gt;
    &lt;g id="g-1"&gt;&lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code>var line = d3.svg.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .interpolate("cardinal")
    .tension(0);
  
   var points = [{x: 0, y: 200}, {x: 25, y: 180}, {x: 50, y: 150}, {x: 100, y: 145}, {x: 200, y: 130}, {x: 300, y: 120}, {x: 500, y: 25}];
  
   d3.select("#g-1").append("path").attr("d", line(points));
  </code></pre>
  
  <p>and now I try to set the circle (depends of X to the line), however I look for some function like <code>line(myX).x</code> for drawing the circle:</p>
  
  <pre><code> d3.select("#g-1").append("svg:circle")
      .attr("cx", myX)
      .attr("cy", line(myX).x)
      .attr("r", 4.5);
  </code></pre>