37

コンテナをズームするようにいくつかのグラフを設定しましたが、うまく機能します。ただし、最初のロードでは、ズーム レベルが近すぎます。最初にズームアウトする必要がないように、初期ズーム レベルを設定する方法はありますか? 私はその.scale()方法に精通していますが、それを実装する運がありませんでした。これは行くべき道ですか、それとも私が見逃しているものがありますか?

ズームに関して私がこれまでに持っているものは次のとおりです。

var margin = {top: 20, right: 120, bottom: 20, left: 120},
    width = 50000 - margin.right - margin.left,
    height = 120000 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .domain([0, width])
    .range([0, width]);

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

var tree = d3.layout.tree()
    .size([height, width])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.x, d.y]; });

function zoom(d) {        
  svg.attr("transform",
      "translate(" + d3.event.translate + ")"+ " scale(" + d3.event.scale + ")");
}

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .attr("pointer-events", "all")
    .call(d3.behavior.zoom()
        .x(x)
        .y(y)
        .scaleExtent([0,8])
        .on("zoom", zoom))
        .append('g');

svg.append('rect')
    .attr('width', width*5)
    .attr('height', height)
    .attr('border-radius', '20')
    .attr('fill', 'sienna');
4

6 に答える 6

34

初期変換とズーム動作の 両方を同じ値に設定することで、最終的にこれが機能するようになりました。

var zoom = d3.behavior.zoom().translate([100,50]).scale(.5);

vis = svg.append("svg:svg")
     .attr("width", width)
     .attr("height", height)
     .call(zoom.on("zoom",zooming))
           .append("svg:g")
           .attr("transform","translate(100,50)scale(.5,.5)");
于 2013-06-11T19:30:28.897 に答える
15

誰かがまだ問題を抱えている場合に備えて、受け入れられた回答への補遺としてこの回答を追加します。

これを本当に分かりやすくしたのは、ここを見ていた

そうは言っても、私は3つの変数を設定しました：

スケール、zoomWidth、zoomHeight

scale は、ズームの初期スケールです。

zoomWidth と zoomHeight は次のように定義されます。

zoomWidth = (width-scale*width)/2
zoomHeight = (height-scale*height)/2

width と height は、「vis」svg 要素の幅と高さです。

上記の翻訳は次のように修正されます。

.attr("transform", "translate("+zoomWidth+","+zoomHeight+") scale("+scale+")")

ズーム機能と同様に：

d3.behavior.zoom().translate([zoomWidth,zoomHeight]).scale(scale)

これにより、ビジュアライゼーションがロードされたときに要素がズームされ、中央に配置されることが効果的に保証されます。

これが役立つかどうか教えてください！乾杯。

于 2014-06-30T22:54:55.787 に答える