d3.js visx,如何在鼠标Enter上增长饼图弧?

kmpatx3s  于 2022-11-24  发布在  其他
关注(0)|答案(1)|浏览(114)

所以我知道如何在我的弧上附加一个mouseEnter事件,好吧...

<g
    key={`arc-${name}-${i}`}
    onMouseEnter={selectArc}
>
    <path d={pie.path(arc) as string} fill={arcFill}/>
</g>

但是在那之后,我不知道如何处理我过去在经典d3js中使用的所有函数。
我想要实现的是https://plnkr.co/edit/GLyA70V4X7xqhg06mgMF?p=preview&preview
在d3中,它们会执行类似以下的操作(请参见上面的链接以获取演示和完整代码):

.on("mousemove", function(d) {
    d3.select(this).transition().duration(200).delay(0).attrTween("d", function(d) {
      var i = d3.interpolate(d.outerRadius, outerRadius);
      return function(t) { d.outerRadius = i(t); return arc(d); };
    });
 ...
})

但如何使用visx实现这一点呢?

v440hwme

v440hwme1#

我希望你正在寻找一些visx的例子与鼠标移动动画。我设法创建了一个演示使用visx。我附上代码沙箱链接如下。
https://codesandbox.io/s/sad-pare-4432ke
让我知道你的反馈。谢谢

相关问题