0

このコードは、http: //domtree.breckyunits.comで実際に実行されています。

少しずれている部分はズーム動作です。ポイントを拡大すると、正しくズームされますが、間違ったポイントに変換されます。ある種の変換/変換を同時に行う必要があるように感じますが、これを理解する方法がよくわかりません。線形代数とベクトル/行列の練習はほとんどありません。

作業が必要なコードの部分は再描画関数です。

var redraw = function () {
  vis.attr("transform", "scale(" + d3.event.scale + "," + d3.event.scale + ") "
    + "translate(" + d3.event.translate[0] + "," + d3.event.translate[1] + ")");
}

すべてのコードはhttps://github.com/breck7/domtree/blob/master/domtree.jsで確認できます。

vis はコードの前半で定義されています。

vis = d3.select("#body").append("svg:svg")
    .attr("viewBox", "0 0 " + w + " " + h )
    .call(d3.behavior.zoom().on("zoom", redraw))
    .attr("preserveAspectRatio", "xMidYMid meet")
    .append("svg:g")
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
4

1 に答える 1

1

デバッグを簡素化するために、[Object] "vis" に .call() を含めないでください。

この他の投稿を読む: d3.js zoom xScale / xAxis

var vis, zm; // as global !
vis.call(zm=d3.behavior.zoom().on("zoom", draw));
function draw() {
    console.log(zm.scale(), zm.translate());
}
于 2013-04-02T14:19:59.370 に答える