visx，如何在 mouseEnter 上增加饼图弧度？

Question

所以我知道如何在我的 arc 上附加 mouseEnter 事件，好的...

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

但在那之后我不知道如何处理我以前使用经典 d3 js 的所有功能。

我要实现的是这个https://plnkr.co/edit/GLyA70V4X7xqhg06mgMF?p=preview&preview

在 d3 中，他们做了类似的事情（参见上面的 link 以获得演示和完整代码）：

.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 做到这一点？

Answer 1

我希望您正在寻找一些带有鼠标 move-over 动画的 visx 示例。我设法使用 visx 创建了一个演示。我在下面附上了代码沙箱 link。

https://codesandbox.io/s/sad-pare-4432ke

让我知道您的反馈。谢谢

visx，如何在 mouseEnter 上增加饼图弧度？

visx, how to grow pie chart arc on mouseEnter?

d3.js

visx