SVG：如何设置所计算的线圈？(svg: How to set a circle on the ca

我想设置一个圆圈与SVG计算的线。

这是我的例子： http://jsfiddle.net/7XC9j/

HTML：

<svg width="300" height="500">
  <g id="g-1"></g>
</svg>

JavaScript的：

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));

现在我尝试设置圆（X依赖于线），但我期待像一些功能line(myX).x为画圆：

 d3.select("#g-1").append("svg:circle")
    .attr("cx", myX)
    .attr("cy", line(myX).x)
    .attr("r", 4.5);

Answer 1:

你可以做到这一点path.getPointAtLength(i)

看到http://jsfiddle.net/GQ8WJ/

Answer 2:

下面是用于添加一个使用在第四对象的圆一个方法points阵列。

在这里工作的小提琴：
http://jsfiddle.net/3RumJ/

JavaScript的

d3.select("#g-1")
    .append("circle")
    .attr("cx", points[3].x )
    .attr("cy", points[3].y )
    .attr("r", 4.5);

Answer 3:

我认为这将是解决方案： http://jsfiddle.net/amgq3/在这个例子中我把x从0到500，并使用功能line得到所需y

文章来源: svg: How to set a circle on the calculated line?