4

他の関連する質問を検索しましたが、D3 が初めてであるか、コーダーとして錆びているだけで、これを理解できません。

グラフがあり、a 軸とデータのみでマウス ホイールをスクロールして拡大できるようにしたいと考えています。現在、x 軸だけではなく、マウス ホイールの回転に合わせてグラフ全体をズームしています。

編集：これは私の最終目標ですが、おそらくズームイン/ズームアウトの制限があります（一度に1つずつ）：http://mbostock.github.com/d3/talk/20111018/#15

ここに投稿された例のコードがあるようです: https://github.com/mbostock/d3/blob/master/examples/zoom-pan/zoom-pan-transform.html

graph.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");

これまでのところ、コードをここにドロップしました：http://jsfiddle.net/toddsherman/x3uWK/

洞察や指示をいただければ幸いです。

4

1 に答える 1

3

回答の一部、ソースで参照として指定されたjsfiddleには、次のものがあります。

chart.select(".xaxis").call(xAxis);
chart.select(".yaxis").call(yAxis);

これは、あなたにとって興味深いかもしれない何かを指します:

xAxis = d3.svg.axis().scale(x);
yAxis = d3.svg.axis().scale(y).orient("left");

スケーリング関数のように見えるxとyを使用：

var x = d3.time.scale().domain([minDate, maxDate]).range([0, graph_width]);

var y = d3.scale.linear()
    .domain([0, max_val])
    .range([graph_height, 0]);

また、ズーム機能には別の変換があります。

chart.selectAll(".chart rect").attr("transform", "translate(" + d3.event.translate[0] + ",0)scale(" + d3.event.scale + ", 1)");

translate 引数は X 軸のみで、Y 軸の値は 0 です。scale 引数は、X 軸のみを指定し、Y 軸には 1 の値を指定します。

とはいえ、これ以上支援する方法がよくわかりません

于 2012-11-26T01:32:36.373 に答える