d3.event.transform has NaN for x and y values, breaking zoom functionality

[chrisconlan]

Hopefully this explanation is sufficient ...

// Binding the zoomer ...
    build_and_bind_zoomer() {

        this.zoomer = d3.zoom()
            .scaleExtent([1, 20])
            .translateExtent([0, 0], [width, height])
            .on('zoom', update_chart_on_zoom);
        this.svg.call(this.zoomer);
    }

// Calling the zoomer ...
    update_chart_on_zoom(event) {
        console.log(d3.event.transform) 
    };

// Returns ... 
{
    k: 1.2345,
    x: NaN,
    y: NaN,
}

When the x and y are NaN basically none of the other zooming functionality works. I don't know how or why the x and y could be NaN. The chart is a time series that uses scaleTime and scaleLinear.

If I monkey-patch the x and y to both be 1, the k-scaling works as expected.

[Fil]

The default example works (see https://observablehq.com/@d3/zoom@38) , so the question is what is different in the two codes. Unfortunately it's difficult to guess from snippets.

[chrisconlan]

Agreed. I was hoping someone that is familiar with the code might understand the circumstances under which x and y could be NaN for d3.event.transform. Is it fair to say that this state shouldn't be possible?

[Fil]

Try maybe

- .translateExtent([0, 0], [width, height])
+ .translateExtent([[0, 0], [width, height]])

https://github.com/d3/d3-zoom#zoom_translateExtent

[chrisconlan]

That worked! Thank you.