visx, how to grow pie chart arc on mouseEnter?-CodePudding

So I know how to attach a mouseEnter event on my arc , ok...

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

But after that I don't know how to handle all the functions I used to use with classic d3 js.

What I want to achieve is this https://plnkr.co/edit/GLyA70V4X7xqhg06mgMF?p=preview&preview

In d3 they do something like this (see link above for demo and complete code) :

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

But how to do this using visx ?

CodePudding user response：

I hope you are looking for some visx example with mouse move-over animation. I managed to create a demo using visx. I attached code sandbox link below.

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

Let me know your feedback. Thanks