0

D3 でズーム可能なエリア プロットを作成しましたが、これはうまく機能します。今、プロットの中央にある x 軸に沿って指定された場所に四角形を追加しようとしています。しかし、私はそれを行う方法を理解できないようです。「rect」要素は、プロットの絶対 (x,y) を使用して指定されるため、ズームを使用する場合は同じ位置に留まります。

したがって、プロット時に「rect」を軸に結び付ける方法があるかどうか疑問に思っていたので、すべてのズームと変換動作の恩恵を受けるか、またはに従って長方形の x、y、幅、長さを手動で編集する必要があります対応する x 座標と y 座標がグラフ上のどこにあるかを把握するだけでなく、翻訳するには? 「rect」を使用しようとしているのは、使用するのに最も柔軟な要素と思われるためです。

ありがとう

アレックス

4

1 に答える 1

0

ズームをどのように行っているのかわかりませんが、軸で使用するスケールのパラメーターを変更していると思いますか? 同じスケールを使用して長方形を配置できるはずです。

プロット座標から開始する場合は、スケールで反転関数を使用すると役立つ場合があります (少なくとも量的スケールで使用できます) 。

最初のプロット座標を取得し、それらを反転して、スケールの変更に合わせて移動できるデータ座標を決定できる必要があります。

スケールが線形の場合、おそらく長さと幅も逆にすることができますが、ドメインに 0 が含まれていない場合はオフセットを計算する必要があります。最も簡単なのは、次のような長方形の端点を計算することです。

var dataX0 = xScale.invert(rect.x);
var dataX1 = xScale.invert(rect.x + rect.width);
var dataWidth = dataX1 - dataX0;

軸座標のデータが既にある場合は、次のようなことができるはずです。

var rectData = [{x: 'April 1, 1999', y: 10000, width: 100, height:100}];
svg.selectAll('rect.boxy')
    .data(rectData)
    .enter().append('rect').classed('boxy', true)
    .style('fill','black');

svg.selectAll('rect.boxy')
    .attr('x', function(d) { return x(new Date(d.x));} )
    .attr('y', function(d) { return y(d.y);})
    .attr('width', function(d) { return d.width;} )
    .attr('height', function(d) { return d.height;} );

あなたが共有した例に基づいて、 x と y (関数として) は、軸が基づいているスケールです。

于 2013-01-04T22:01:36.827 に答える