Misdrawn line and lag

[cilphex]

I have a chart using vx with a slider that lets me manipulate the x scale domain, to include more or fewer data points.

For some domain values, the chart renders fine and everything is smooth. For others, a strange angle is rendered at the beginning of my line, and things like tooltips become very laggy.

The data does not change, and when I inspect the d value of the generated <path> in the html, it does not seem to contain values at the beginning that would result in drawing such a glitch.

Wondering if anyone knows what's going on here? Here is the demo, 3rd chart on the page: https://test.bitcoin.craighammell.com/never-look-back

Normal:

Glitch:
Notice the bent line on the left, which is not accounted for in the line data

[williaster]

Hey @cilphex 👋 thanks for checking out visx. this does sound strange, but it's pretty difficult to debug further without a sandbox or similar to reproduce it. otherwise it could be any number of things.

[cilphex]

@williaster Here is the live page: https://test.bitcoin.craighammell.com/never-look-back

Notice how the page is smooth-scrolling and the first two chart hovers work just fine and well, until you scroll to the 3rd chart, which exhibits the issues mentioned above. When it renders, the whole page becomes exceptionally laggy. If you play with the 3rd chart's slider and move it to a position where the pink line glitch disappears, then the lag on the page goes away.

Very strange.

[williaster]

Hey @cilphex I just visited your link and it seemed to work fine / performant-ly for me, did you make any augmentations? (great charts btw! 📈 )

Regarding update performance for things like this, one option you could check out is react-spring's animated components. The library is great for animation, and in particular using <animated.* /> types of components which exactly match what you'd get with standard react components but they bypass the typical react lifecycle methods which are what kill perf in react vis apps. so you would use <animated.path /> in place of <path /> and get improved transitions (this is not a problem in typical d3 because it handles DOM updates; react also wants to handle DOM updates, but it's slow)

[cilphex]

@williaster I haven't changed anything, I made a video for you to show what I'm talking about: https://www.youtube.com/watch?v=PgDllT8LbFY

This is chrome on mac, but I get the same result in chrome on Android. Please let me know if you observe this lag as well.

[cilphex]

@williaster Can you see what I describe in the video link in my previous comment?

[williaster]

Super weird, I can't reproduce it (visiting https://test.bitcoin.craighammell.com/never-look-back) on macOS BigSur 11.6 with Chrome 93.0.4577.82 or Firefox 92.0 or Safari 14.1.2.