D3 proper zooming / rescaling

Question

I'm using D3 to build charts. I need to use canvas because of the amount of data I want to draw. I split my code into two parts:

• data joins
• drawing

Currently, I'm working on a zoom capability and I'm not sure what would be the best practice here. My data joins look as follows:

axes.x.forEach((xAxis, xIndex) => {
        axes.y.forEach((yAxis, yIndex) => {

            const currentXScale = xAxis.scale;
            const currentYScale = yAxis.scale;

            const filter = (series) => (series.xAxis === xIndex || !isDefined(series.xAxis) && xIndex === 0) && (series.yAxis === yIndex || !isDefined(series.yAxis) && yIndex === 0)

            dataContainer.selectAll(`custom.series[type="line"][xAxis="${xIndex}"][yAxis="${yIndex}"]`)
                .data(options.series.filter(s => s.type === "line" && filter(s)))
                .enter()
                .append("custom")
                .attr("class", "series")
                .attr("xAxis", d => d.xAxis || 0)
                .attr("yAxis", d => d.yAxis || 0)
                .attr("type", d => d.type)
                .attr("strokeOpacity", d => d.opacity || 1)
                .attr("size", d => d.size || 1.5)
                .attr('strokeStyle', d => d.color)
                .selectAll("custom.dataPoint")
                .data(d => d.data)
                .join(
                    enter => enter.append("custom").attr("class", "dataPoint").attr("x", (d) => currentXScale(+d[0])).attr("y", (d) => currentYScale(+d[1])),
                    update => update.attr("x", (d) => currentXScale(+d[0])).attr("y", (d) => currentYScale(+d[1]))}
                );
...

To give you some context, this is only a part of the code which allows for multiple X & Y axes, that's why there is filtering done and there are different types of plots (line, area, scatter etc.).

This is how I'm doing the drawing part:

const drawLine = (series, context) => {
    const elements = series.selectAll('custom.dataPoint');
    const lineGenerator = line().curve(curveCardinal.tension(0.9)).x(d => select(d).attr("x")).y(d => select(d).attr("y"));
    lineGenerator.context(context);

    console.log(elements);

    context.strokeStyle = series.attr("strokeStyle");
    context.globalAlpha = series.attr("strokeOpacity");
    context.lineWidth = series.attr("size");
    context.beginPath();
    lineGenerator(elements);
    context.stroke();
}

So general patter is that I have series with some common attributes and then data points which are scaled during data joining.

Here is my question: What is the best place (best practice, if any) to scale data - during the data join or during drawing? The context of this question is that I'm trying to zoom the chart and I need to do rescaling which means x and y attributes change, but the data itself does not change so update part of a join won't be called.