反应缩放/平移散点图，数据过滤与剪辑

Question

我在React实现中有一个关于散点图的缩放/平移功能的问题。

我想知道什么方法会很好并希望听到React＆amp; amp;数据可视化专家。

我特别感兴趣的是实现散点图的缩放/平移功能，该散点图动态地改变数据范围以进行可视化。

（方法1）给定数据范围（由鼠标滚轮事件控制），首先，过滤数据，并为过滤后的数据渲染圆（）。在这种情况下，将使用新密钥生成每个圆圈，以便

const circles = [];
filteredData.forEach( (d, index) => {
     circleProps = { /*..compute circle props... (e.g. position within a SVG) */ }
     circles.push(
          <circle key={`circle-${index}`} {...circleProps} />
     );
});

因此，每次数据范围发生变化时，它都会创建一个位于该范围内的新圆圈。

（方法2）与方法1类似，但没有对数据进行过滤。相反，请使用clip path仅显示范围内的圆圈。在这种情况下，它会根据重新计算的位置更新整个圆圈，但它只会在开头创建一次圆圈。

最好的办法是什么？或者，处理大规模数据的任何其他选项？如果有任何问题，请纠正我。

感谢。