0
私はsvgでD3.jsを描画しています。私はそれをパンしてズームできたいと思っています。私はまた、最初のウィンドウの周りに矩形を描画する必要があります。ズームアウトすると矩形が小さくなり、ズームインすると大きくなり、パンを回すと通常通り動きます。通常のもの。パンニングの感性を変えずにzoom.translate（）の結果を得るにはどうすればいいですか？
また、実際のウィンドウに合わせるために矩形を再描画できるようにしたいと考えています（たとえば、再描画の間に拡大した場合、最初のサイズよりも小さくなります）。私はコード例にこの部分を含めませんでしたが、ズームプロパティを取得する方法が必要な理由を説明しています。
矩形を正しくトレースするために、私はzoom.translate（）とzoom.scale（）プロパティを見つけました。矩形のパーツの座標を計算するのに必要なパラメータを与えるはずです。しかし、私はこの部分を自分のコードに追加してから、ズームインとズームアウトするにつれてパンニングの感性が変わっていきました。ズームインするほど、パンニングが賢明でなくなり、ズームインするほど賢明になります。
私の考えでは、zoom.translate（）とzoom.scale（）はパラメータを取得するだけで、ズームやパンの動作を変更することはできませんでした。
私はまた、ウィンドウに収まらない四角形を描いています。それはちょっと大きくて短くなっています。
ここでは、コードの私の作品：
var svg;
var map;
var zoom;
var graph = d3.select("#graph");
zoom = d3.behavior.zoom()
.translate([0, 0])
.scale(1)
.on("zoom", function() {
svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
});
svg = graph.append("svg")
.attr("width",window.innerWidth)
.attr("height",window.innerHeight)
.call(zoom);
map = svg.append("g");
ここでは、長方形の座標の取得です：
var w_b = {
x_min: (0 - zoom.translate()[0])/zoom.scale(),
x_max: (svg.attr("width") - zoom.translate()[0])/zoom.scale(),
y_min: (0 - zoom.translate()[1])/zoom.scale(),
y_max: (svg.attr("height") - zoom.translate()[1])/zoom.scale()
そして、ここでは、長方形の図である。
map.selectAll("line").remove();
map.append("line").attr("x1", w_b['x_min']).attr("x2", w_b['x_max']).attr("y1", w_b['y_min']).attr("y2", w_b['y_min'])
.attr("stroke-width", 1).attr("stroke", "black");
map.append("line").attr("x1", w_b['x_min']).attr("x2", w_b['x_max']).attr("y1", w_b['y_max']).attr("y2", w_b['y_max'])
.attr("stroke-width", 1).attr("stroke", "black");
map.append("line").attr("x1", w_b['x_min']).attr("x2", w_b['x_min']).attr("y1", w_b['y_min']).attr("y2", w_b['y_max'])
.attr("stroke-width", 1).attr("stroke", "black");
map.append("line").attr("x1", w_b['x_max']).attr("x2", w_b['x_max']).attr("y1", w_b['y_min']).attr("y2", w_b['y_max'])
.attr("stroke-width", 1).attr("stroke", "black");
として、ボーナスの質問ですが、これはChrome上ではまったく機能しません。正しく動作する