svg：如何在计算行上设置一个圆？ [英] svg: How to set a circle on the calculated line?

问题描述

我想用svg在计算行上设置一个圆。

I'm trying to set a circle on the calculated line with svg.

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

html：

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

javascript：

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

现在我尝试设置圆一些函数像 line（myX）.x 用于绘制圆：

and now I try to set the circle (depends of X to the line), however I look for some function like line(myX).x for drawing the circle:

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

推荐答案

path.getPointAtLength（i）

You can do it with path.getPointAtLength(i)

请参阅
http://jsfiddle.net/GQ8WJ/

这篇关于svg：如何在计算行上设置一个圆？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！