我想用支持鼠标滚动缩放的D3制作大约100.000个项目的散点图。我设法在React中实现了这一点。不幸的是，缩放交互非常慢。有没有办法让缩放更平滑和即时？
我的useEffect如下所示

useEffect(() => {
        //setting up container width and height
        const w = width;
        const h = height;

        // create the result chart
        const resultChart = d3.select(resultChartRef.current)
            .attr('width', w)
            .attr('height', h)
            .style('margin-top', '10px');

        // Create the latent chart
        const latentChart = d3.select(latentChartRef.current)
            .attr('width', w)
            .attr('height', h)
            .style('margin-top', '10px');

            // d3.select(resultChartRef.current).selectAll().remove().exit()

        // Compute the scales of the two charts
        const resultScales = setScalesChart(dimRedData?.data?.result, w, h)
        const latentScales = setScalesChart(dimRedData?.data?.latent_space, w, h)

        if (currentZoomState) {
            const newXScale = currentZoomState.rescaleX(resultScales[0])
            const newYScale = currentZoomState.rescaleX(resultScales[1])
            resultScales[0].domain(newXScale.domain())
            resultScales[1].domain(newYScale.domain())
        };

        const xAxis = d3.axisBottom(resultScales[0]).ticks(10)
        const yAxis = d3.axisLeft(resultScales[0]).ticks(10)

        const gX = resultChart.append('g').call(xAxis).attr('transform', `translate(0, ${h})`);
        const gY = resultChart.append('g').call(yAxis);

        // TODO: styling properties http://www.d3noob.org/2014/02/styles-in-d3js.html
        resultChart.selectAll('*').remove();
        resultChart.selectAll('circle')
            // select dataset
            .data(filterData(dimRedData?.data?.result))
            .enter()
            // Assign data value
            .append('circle')
                .attr('cx', d => resultScales[0](d[0]))
                .attr('cy', d => resultScales[1](d[1]))
                .attr('r', 2)
            // Add item colour
            .style("fill", function(d, i) {
                return dimRedData.data.colour[0][i]
            })
            // Set border width
            .style("stroke-width", 0.5)
            // Add border colour
            .style("stroke", "black");

        latentChart.selectAll()
            // select dataset
            .data(filterData(dimRedData?.data?.latent_space))
            .enter()
            // Assign data value
            .append('circle')
                .attr('cx', d => latentScales[0](d[0]))
                .attr('cy', d => latentScales[1](d[1]))
                .attr('r', 2)
            // Add item colour
            .style("fill", function(d, i) {
                return dimRedData.data.colour[0][i]
            })
            // Set border width
            .style("stroke-width", 0.5)
            // Add border colour
            .style("stroke", "black");

        // Zoom of the chart
        const zoomBehavior = d3.zoom()
            .extent([[0, 0],[w, h]])
            .scaleExtent([0.5, 5])
            .translateExtent([[0,0], [w, h]])
            .on("zoom", (e) => {
                const zoomState = d3.zoomTransform(resultChart.node())
                setCurrentZoomState(zoomState);
                console.log("ZOOM!")
            });

        // Add zoom functionality to the result chart
        resultChart.call(zoomBehavior)

    }, [random, projectionFullScreen, currentZoomState]);

我想知道是否有可能加快速度，或者我应该换一种不同的方法。甚至可能是一种与D3不同的技术。