score:1

Accepted answer

tldr

y scale's domain contains still max value from whole dataset. update the domain of the y scale to the max value of the currently visible dataset, by filtering it first by the rescaled x scales' domain.

long version

i guess, your chart should only zoom in the x direction. under this assumption, you need to implement an auto scaling for the y axis yourself. the current problem is, that your y scale's domain contains the min and max values of your whole data set. now that you have zoomed the max value might be smaller.

so, what you need to do is, get the domain of the rescaled x scale domain. use that domain to filter your dataset for that time range and then pick the max value out of that time range filtered subset. then you update the domain for your y scale with that new max value and rerender. by the way, rescaling the y scale is not necessary, if you only want to do zoom on the x axis.

// global cache for the data
const data;

function zoomed(event) {
    const xz = event.transform.rescalex(x);

    const [minx, maxx] = xz.domain();
    const filtereddata = data.filter((item) => item.date >= minx && item.date <= maxx);
    y.domain([0, d3.max(filtereddata, d => d.value)]);
   
    const yz = event.transform.rescaley(y);
    path.attr("d", area(data, xz));
    gx.call(xaxis, xz);
    gy.call(yaxis, yz);
}

score:1

thanks for guidance: https://observablehq.com/@steve-pegg/zoomable-area-chart

changes below have worked.

function zoomed(event) {
                var xz = event.transform.rescalex(x);
                var startdate = xz.domain()[0];
                var enddate = xz.domain()[1];
                var fdata = data.filter(function (d) {
                    var date = new date(d.date);
                    return (date >= startdate && date <= enddate);});
                y.domain([0, d3.max(fdata, function (d) { return d.value; })]);
                path.attr("d", area(data, xz));
                gx.call(xaxis, xz);
                gy.call(yaxis, y);
               }

Related Query