Fil
commented
4 years ago you can see a working example at https://observablehq.com/@d3/zoomable-area-chart?collection=@d3/d3-zoom
Closed liuxz-cs closed 4 years ago
Fil
commented
4 years ago you can see a working example at https://observablehq.com/@d3/zoomable-area-chart?collection=@d3/d3-zoom
I draw a line chart. And I use zoom in the line chart. When I Scroll the mouse wheel，the updated line will display out of the axis. I want to know how to solve the problem.
The relevant code is here: var zoom = d3.zoom() .scaleExtent([1, maxScale]) .translateExtent([ [padding, 0], [width - padding, height] ]) .extent([ [padding, 0], [width - padding, height] ]) .on("zoom", zoomed); svg1.call(zoom); function zoomed(){ var t = d3.event.transform; var xt = t.rescaleX(xScale); svg1.select('.bottom_axis').call(xAxis.scale(xt)); var line_trans = d3.line() .x(d => {return transform.applyX(xScale(xValue(d)));}) .y(d => {return yScale(yValue(d));}) .curve(d3.curveCardinal.tension(0.5)); g1.select('.datacurve').datum(data) .style("fill", "none") .style("stroke", "blue") .attr("d", line_trans); }