Published
Edited
Sep 7, 2020
2 forks
3 stars
chart = {
const zoom = d3.zoom()
.scaleExtent([.25, 4])
.on("zoom", zoomed);
const svg = d3.select("svg")
.attr("viewBox", [0, 0, width, height]);
const patternGrid = svg.select('#grid');
const patternInnerGrid = svg.select('#inner-grid');
const canvas = svg.select('g');
svg.call(zoom).call(zoom.transform, d3.zoomIdentity);
function zoomed({transform}) {
const transform10 = parseInt(transform.k * 10);
const transform100 = transform10 * 10;
// Don't move the grid itself, simply change the pattern.
patternGrid
.attr('x', parseInt(transform.x % transform100))
.attr('y', parseInt(transform.y % transform100))
.attr('width', transform100)
.attr('height', transform100);
patternInnerGrid
.attr('width', transform10)
.attr('height', transform10);
// Translate and scale the canvas.
canvas.attr('transform', transform);
}
return Object.assign(svg.node(), {
reset() {
const identity = d3.zoomIdentity;
identity.x = width / 2;
identity.y = height / 2;
svg.transition()
.duration(750)
.call(zoom.transform, identity);
}
});
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
