3

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

line(myX).xそして今、私は円を設定しようとします（Xの線に依存します）が、円を描くためのような関数を探します：

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

3 に答える 3

3

あなたはそれを行うことができますpath.getPointAtLength(i)

http://jsfiddle.net/GQ8WJ/を参照してください

于 2013-03-08T10:52:40.903 に答える
0

これが解決策になると思います: http://jsfiddle.net/amgq3/ この例ではx、0 から 500 までを取得し、関数lineを使用して必要な情報を取得します。y

于 2013-03-04T19:06:40.587 に答える
0

points配列の 4 番目のオブジェクトを使用して円を追加する方法の 1 つを次に示します。

ここで作業フィドル:
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-03T21:14:28.087 に答える