1

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

<g
    key={`arc-${name}-${i}`}
    onMouseEnter={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 ?

François Richard
  • 6,817
  • 10
  • 43
  • 78

1 Answers1

2

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

DharmanBot
  • 1,066
  • 2
  • 6
  • 10
Atikur Rabbi
  • 1,061
  • 10
  • 20