const data = []; var x = d3.scaleLinear(); var y = d3.scaleLinear(); var x2 = d3.scaleLinear(); var y2 = d3.scaleLinear(); var area = fc.seriesSvgPoint() .crossValue(function(d) { return d.x; }) .mainValue(function(d) { return d.y; }) .size(800); var zoom = d3.zoom() .on('zoom', function() { x.domain(d3.event.transform.rescaleX(x2).domain()); y.domain(d3.event.transform.rescaleY(y2).domain()); render(); }); var chart = fc.chartSvg(x, y) .chartLabel('') .plotArea(area) .decorate((sel) => { sel.enter() .select('#plot-area') .on('measure.range', () => { x2.range([0, d3.event.detail.width]); y2.range([d3.event.detail.height, 0]); }) .call(zoom); }); function render() { d3.select('#zoom-chart') .datum(data) .call(chart); } render(); })();