Not possible to update a @vx/grid scale in a performant way?

[cilphex]

I would like to update the scale on a Grid component every few milliseconds, in accordance with a mouse drag. I have this working already with plain d3, but I am attempting to rewrite it using react & vx.

You can manipulate a LinePath this way easily by using its innerRef instead of using setState.

But Grid has no innerRef. It looks like Grid just builds an SVG group that wraps a bunch of lines, which makes sense. But without a way to reference the inner refs, it seems that you must rely on setState to update the Grid scales, and this is really non-performant. It is laggy and for anything beyond about 2 updates per second.

Is there a way to update the xScale and yScale on a Grid in a performant way, so that it can be done without lag every few milliseconds?

[cilphex]

@williaster Wondering if you might have any ideas?

[williaster]

Sorry for the delay, closing this as it should now be possible with AnimatedGrid from @vx/react-spring (added in 0.0.199), or using a similar approach if you don't want to use react-spring.

https://vx-demo.now.sh/axis includes a demo of AnimatedAxis + AnimatedGrid, and you can check out #787 where it was added.