我试图在加载时将我的 d3 图居中。所以我跑
var g = svg.append("g");
//... then later
g.call(zoom.transform, center);
它实际上并没有居中，它现在只是在缩放。但规模有效。问题是，当我滚动放大或缩小时，它从 1 而不是 0.5 开始。所以它跳了。
这是我的 jsbin .
最佳答案
您正在将您的事件应用于不同的对象(g)，然后将缩放设置在不同的对象(svg)上。由于缩放事件是针对它所应用的元素进行引用的，因此 d3 现在与您的初始居中无关。来自docs :
The zoom behavior stores the zoom state on the element to which the zoom behavior was applied, not on the zoom behavior itself. This is because the zoom behavior can be applied to many elements simultaneously, and each element can be zoomed independently. The zoom state can change either on user interaction or programmatically via 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>关于javascript - 编程缩放后使用鼠标时 d3.js 平移和缩放跳跃，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38597582/