ロード時にグラフを中央に配置しようとしています。だから実行するd3.jsプログラムズーム後にマウスを使用すると、パンとズームがジャンプする
var g = svg.append("g");
//... then later
g.call(zoom.transform, center);
実際にはセンタリングされていないので、今すぐスケーリングしています。しかし、規模は機能します。問題は、スクロールしてズームインまたはズームアウトすると、0.5の代わりに1から始まります。だからそれはジャンプする。
ここは私のjsbinです。
異なるオブジェクト（g）にズームを設定している場合（svg）、イベントを適用しています。ズームイベントが適用されている要素に対して参照されているため、d3は初期のセンタリングについては表示されません。 docsから：
ズーム動作は ズーム動作が適用された要素ではなく、ズーム動作自体にズーム状態を記憶します。これは です。ズームの動作を多くの要素 に同時に適用でき、各要素を個別にズームすることができるためです。ズーム の状態は、ユーザーとのやりとりの際に、または zoom.transformを介してプログラムによって変更することができます。
電話番号をsvg.call(zoom.transform, center);に変更すると、問題が解決されます。
完全なコード：
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
transform = d3.zoomIdentity;
var points = d3.range(2000).map(phyllotaxis(10));
var zoom = d3.zoom()
.scaleExtent([1/2, 8])
.on("zoom", zoomed);
var g = svg.append("g");
g.selectAll("circle")
.data(points)
.enter().append("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", 2.5)
.call(d3.drag()
.on("drag", dragged));
svg.call(zoom);
function zoomed() {
g.attr("transform", d3.event.transform);
}
function center() {
return d3.zoomIdentity
.scale(0.5);
}
function dragged(d) {
d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}
function phyllotaxis(radius) {
var theta = Math.PI * (3 - Math.sqrt(5));
return function(i) {
var r = radius * Math.sqrt(i), a = theta * i;
return {
x: width/2 + r * Math.cos(a),
y: height/2 + r * Math.sin(a)
};
};
}
svg.call(zoom.transform, center);<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
</body>
</html>
は、ありがとう、ありがとう！ –