score:1

Accepted answer

In your zoom function, you can rescale the x axis, and then use that to redraw the entire graph:

const zoom = d3.zoom()
  .on("zoom", function(event) {
    x2 = event.transform.rescaleX(x); 
    xAxisG.call(xAxis.scale(x2));
    path.attr("d", line);
  })

x2 refers to a working scale (which is used with d3.line() as well). The scale x is used as a reference scale for the rescaling (we don't want to rescale x2 using itself as then we get the wrong zoom value). By doing this we only manipulate the x values while the y values remain the same.

Below I've added a clipping path to stop the graph from overflowing from the plot area.

You can't use the zoom transform itself to manipulate the graph as it applies the same scaling value to both x and y axes. It only zooms geometry. The approach proposed here is a semantic zoom: using the data and rescaling it in one dimension given the state of a zoom transform.

Here's a working example:

const width = 500;
const height = 180;
const padding = {top: 10, bottom: 50, left: 40, right: 20};

const svg = d3.select("svg")
  .attr("width", width + padding.right + padding.left)
  .attr("height", height + padding.top + padding.bottom)
  
const plotArea = svg.append("g").attr("transform","translate("+[padding.left,padding.top]+")")  

const clippingRect = plotArea
  .append("clipPath")
  .attr("id", "clippy")
  .append("rect")
  .attr("width",width)
  .attr("height",height)
  .attr("fill","none")

  
const data = d3.range(100).map(function(d) {
  return { value: Math.random(), sample: d }
})

const x = d3.scaleLinear().range([0,width]).domain([0,100]);
let x2 = x.copy();
const y = d3.scaleLinear().range([height,0]).domain([0,1]);

const line = d3.line()
    .x(d => x2(d.sample))
    .y(d => y(d.value));
    
const xAxis = d3.axisBottom(x2);
const xAxisG = plotArea.append("g")
  .attr("transform","translate("+[0,height]+")")
  .call(xAxis);
  
const yAxis = d3.axisLeft(y);
const yAxisG = plotArea.append("g").call(yAxis)

  
const path = plotArea.append("path")
  .datum(data)
  .attr("d", line)
  .attr("clip-path","url(#clippy)")
  
 
const zoom = d3.zoom()
  .on("zoom", function(event) {
    x2 = event.transform.rescaleX(x); 
    xAxisG.call(xAxis.scale(x2));
    path.attr("d", line);
  })

svg.call(zoom);
path {
  fill: none;
  stroke-width: 1px;
  stroke: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.1.0/d3.min.js"></script>
<svg></svg>


Related Query

More Query from same tag