I have a project where I'm trying to zoom to specific points. In d3v3, I could do that with this function
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]]);
}
Zoom has changed, though, and this no longer works in d3v6.
I found an example on Observable that does exactly what I want using d3v6: https://observablehq.com/d/9035ed7049aaa8c6
However, I'm not sure how to translate it to vanilla javascript. Below is my attempt. I'm getting this error:
d3.zoom(...).scaleExtent(...).on(...).center is not a function
It runs fine in Observable, though, so clearly I'm missing something. Any help would be greatly appreciated! (Also, I don't need the buttons that are at the top of the Observable example, so I commented those out.)
<!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>
Here it is in a Plunker, as well, if that's helpful: https://plnkr.co/edit/JaiKhTgEXzIFWiar?open=lib%2Fscript.js
from Convert d3v6 Observable example using zoom.center
No comments:
Post a Comment