18

大まかに次のコードを使用して、D3 で折れ線グラフを表示します (スケール関数xとyfloat 配列を指定data)。

 var line = d3.svg.line()
         .interpolate("basis")
         .x(function (d, i) { return x(i); })
         .y(function (d) { return y(d); });
 d3.select('.line').attr('d', line(data));

ここで、特定の水平ピクセル位置での線の垂直方向の高さを知りたいです。配列のdataデータ ポイントはピクセルよりも少なく、表示される線は補間dataされるため、配列から特定のピクセルの線の高さを推測するのは簡単ではありません。

ヒントはありますか？

4

3 に答える 3

10

2012 年 9 月 19 日、コメントごとに編集 されました。nabinowitz に感謝します。

によって返されたデータに対して何らかの検索を行う必要がありますgetPointAtLength。( https://developer.mozilla.org/en-US/docs/DOM/SVGPathElementを参照してください。)

// Line
var line = d3.svg.line()
     .interpolate("basis")
     .x(function (d) { return i; })
     .y(function(d, i) { return 100*Math.sin(i) + 100; });

// Append the path to the DOM
d3.select("svg#chart") //or whatever your SVG container is
     .append("svg:path")
     .attr("d", line([0,10,20,30,40,50,60,70,80,90,100]))
     .attr("id", "myline");

// Get the coordinates
function findYatX(x, linePath) {
     function getXY(len) {
          var point = linePath.getPointAtLength(len);
          return [point.x, point.y];
     }
     var curlen = 0;
     while (getXY(curlen)[0] < x) { curlen += 0.01; }
     return getXY(curlen);
}

console.log(findYatX(5, document.getElementById("myline")));

私にとって、これは [5.000403881072998, 140.6229248046875] を返します。

この検索関数findYatXは効率的とはほど遠い ( O(n)時間で実行される) が、ポイントを示しています。

于 2012-08-19T06:01:21.910 に答える