D3正确缩放/重缩放

我用D3绘制图表。我需要使用画布,因为我想要绘制的数据量很大。我将代码分为两部分:

• 数据连接
• 绘画

目前,我正在研究缩放功能,我不确定这里的最佳实践是什么。我的数据连接如下所示:

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]))}
                );
...

为了给你一些上下文,这只是代码的一部分,它允许多个X&Y轴,这就是为什么要进行过滤,并且有不同类型的图(线、面积、散布等)。

这是我做绘图部分的方式:

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();
}

所以一般的模式是,我有一些公共属性的序列,然后是在数据连接期间缩放的数据点。

这是我的问题 :在数据连接或绘图期间,缩放数据的最佳位置(最佳做法,如果有)是什么? 这个问题的背景是,我正在尝试缩放图表,我需要进行重新缩放,这意味着x和y属性会改变,但数据本身不会改变 update 一部分 join 不会被叫的。