chart = {
const zoom = d3.zoom()
.scaleExtent([0.25, 4])
.on('zoom', zoomed);
const svg = d3.select('svg')
.attr('viewBox', [0, 0, width, height]);
const canvas = svg.select('g#canvas');
const gridContainer = svg.select('g#grid');
svg.call(zoom).call(zoom.transform, d3.zoomIdentity);
function zoomed({transform}) {
const zx = transform.rescaleX(x).interpolate(d3.interpolateRound);
const zy = transform.rescaleY(y).interpolate(d3.interpolateRound);
gridContainer.call(grid, zx, zy);
canvas.attr('transform', transform);
}
return Object.assign(svg.node(), {
reset() {
const identity = d3.zoomIdentity;
identity.x = 200;
identity.y = 200
svg.transition()
.duration(750)
.call(zoom.transform, identity);
}
});
}