svg：如何在計算的線上設置一個圓？

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

來源

2013-03-03 Mark

你可以用path.getPointAtLength(i)

做到這一點看 http://jsfiddle.net/GQ8WJ/

來源

2013-03-08 10:52:40

如此有用。謝謝。 – 2014-12-09 18:31:09

以下是添加使用points陣列中第4個對象的圓的一種方法。

工作小提琴這裏：
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);

來源

2013-03-03 21:14:28 mg1075

:)是的，精確點說起來很簡單，但我想說明的圈子也點之間，例如x = 15 – Mark 2013-03-04 12:34:33

我認爲這將是解決方案：http://jsfiddle.net/amgq3/ 在這個例子中，我採取x從0到500，並使用功能line獲得要求y

來源

2013-03-04 19:06:40 XiM

不是牀，但是我需要使用'interpolate（「cardinal」）'畫線。 – Mark 2013-03-04 22:44:03

我試過這樣做，但沒有成功。抱歉。我只是想出了在繪製線條之前先獲得cicrle的隨機座標，然後將它添加到數組'points'然後繪製線條 - 但我認爲這不是你想要的=） – XiM 2013-03-05 15:46:05

svg：如何在計算的線上設置一個圓？

回答

相關問題