How to zoom only on the X axis in a line chart in d3.js (v7)

Question

I can apply a zoom to a path in d3v7. However, how can I zoom only in the x-axis instead of a standard zoom?

(1) How I call the zoom function:

var svgArea = d3.select('#svg');
const path = svgArea.append("path");
const line = d3.line()
    .x(d => scale.x(d.sample))
    .y(d => scale.y(d.value));
path
    .datum(dataset)
    .attr("fill", fillColor)
    .attr("stroke", color)
    .attr("d", line);
svgArea.call(zoom, padding, width, height, path);

(2) Zoom Function

function zoom(svg, padding, width, height, path) {

    var extent = [
        [padding, padding],
        [width, height]
    ];

    var zooming = d3.zoom()
        .scaleExtent([1, 3])
        .translateExtent(extent)
        .extent(extent)
        .on("zoom", zoomed);

    svg.call(zooming);

    function zoomed(e) {
        path.attr("transform", e.transform);
    }
}

user_7106086 · 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;
}

How to zoom only on the X axis in a line chart in d3.js (v7)

1 Answers