我有一个项目，我试图缩放到特定的点。在d3v3中，我可以用这个函数
function zoomTo(place, pscale) {
projection = d3.geo.mercator()
.scale((1 << pscale) / 2 / Math.PI)
.translate([width / 2, height / 2])
center = projection(place);
return zoom
.scale(projection.scale() * 2 * Math.PI)
.translate([width - center[0], height - center[1]]);
}
缩放已经改变，这在d3v6中不再工作。
我在Observable上找到了一个例子，它完全符合我使用d3v6的要求:https://observablehq.com/d/9035ed7049aaa8c6
然而，我不确定如何将其翻译为香草javascript。下面是我的尝试。我得到这个错误:
d3.zoom(...).scaleExtent(...).on(...).center is not a function
在Observable中运行得很好，所以很明显我遗漏了一些东西。任何帮助将非常感激!(另外，我不需要在Observable示例顶部的按钮，所以我把它们注释掉了。)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zoom to Point</title>
<script src="https://files-7y4qaclbi.vercel.app/d3-zoom.js"></script>
<script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
<script>
// const form = html`<form>
// <button name="in" type="button">Zoom In</button>
// <button name="out" type="button">Zoom Out</button>
// <button name="random" type="button">Random</button>
// <button name="reset" type="button">Reset</button>
// </form>`;
// form.in.onclick = () => chart.zoomIn();
// form.out.onclick = () => chart.zoomOut();
// form.random.onclick = () => chart.zoomRandom();
// form.reset.onclick = () => chart.zoomReset();
// return form;
const radius = 6
const step = radius * 5
const width = 500
const height = 500
const theta = Math.PI * (3 - Math.sqrt(5))
const data = Array.from({ length: 1000 }, (_, i) => {
const radius = step * Math.sqrt(i += 0.5), a = theta * i;
return [
width / 2 + radius * Math.cos(a),
height / 2 + radius * Math.sin(a)
];
})
const quadtree = d3.quadtree()
.addAll(data)
// let mutable debug = undefined;
let focussed;
function findCloser(that, coords) {
const p = d3.zoomTransform(that).invert(coords);
focussed = quadtree.find(p[0], p[1]);
return d3.zoomTransform(that).apply(focussed);
}
const zoom = d3
.zoom()
.scaleExtent([1, 40])
.on("zoom", zoomed)
.center(function (event, d) {
// mutable debug = { event, d, r: Math.random() };
let coords = d3.pointer(event, this);
focussed = null;
if (event.deltaY < 0) {
coords = findCloser(this, coords);
}
g.selectAll("circle").attr("r", p =>
p == focussed ? radius + 3 : radius
);
return coords;
});
const svg = d3.select('body').append("svg")
.attr('width', width)
.attr('height', height)
.on("click", reset);
const g = svg.append("g");
g.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", ([x]) => x)
.attr("cy", ([, y]) => y)
.attr("r", radius)
.attr("fill", (d, i) => d3.interpolateRainbow(i / 360))
.on("click", clicked);
svg.datum("I'm your worst datum").call(zoom); //.on("mousemove", mousemove);
function random() {
const [x, y] = data[Math.floor(Math.random() * data.length)];
svg
.transition()
.duration(2500)
.call(
zoom.transform,
d3.zoomIdentity
.translate(width / 2, height / 2)
.scale(40)
.translate(-x, -y)
);
}
function reset() {
svg
.transition()
.duration(750)
.call(
zoom.transform,
d3.zoomIdentity,
d3.zoomTransform(svg.node()).invert([width / 2, height / 2])
);
}
function clicked(event, [x, y]) {
event.stopPropagation();
svg
.transition()
.duration(750)
.call(
zoom.transform,
d3.zoomIdentity
.translate(width / 2, height / 2)
.scale(40)
.translate(-x, -y),
d3.pointer(event, svg.node())
);
}
function zoomed(event) {
g.attr("transform", event.transform);
}
// return Object.assign(svg.node(), {
// zoomIn: () =>
// svg
// .transition()
// .call(zoom.scaleBy, 2, findCloser(svg.node(), [width / 2, height / 2])),
// zoomOut: () => svg.transition().call(zoom.scaleBy, 0.5),
// zoomRandom: random,
// zoomReset: reset
// });
</script>
</body>
</html>
这是一个普朗克，如果有帮助的话:https://plnkr.co/edit/JaiKhTgEXzIFWiar?open=lib%2Fscript.js
从第一个版本到当前版本(撰写本文时为v3.0.0)，任何d3-变焦版本都没有zoom.center。
这个zoom.center方法是由Observable的作者创建的，它对D3有积极的贡献(见这里)。您可以在这里看到提案:https://github.com/d3/d3-zoom/pull/212
然而，如果你检查作者正在使用的代码，你会发现添加你自己的center方法并不复杂。你只需要:
zoom.center = function(_) {
return arguments.length ? (center = typeof _ === "function" ? _ : constant([+_[0], +_[1]]), zoom) : center;
};
……
function defaultCenter(event) {
return d3Selection.pointer(event, this);
}
使用几个center.apply(this, arguments)，您可以通过查看该文件找到。