search

Olical / react-faux-dom

DOM like structure that renders to React (unmaintained, archived)
http://oli.me.uk/2015/09/09/d3-within-react-the-right-way/
The Unlicense
1.21k stars 87 forks source link

Duplicate tick labels on axis update #141

Closed maybelinot closed 5 years ago

maybelinot commented 5 years ago

Can you help me figure out what's going wrong with the update of axis domain?

here are two examples of the same update in pure d3 and d3 in react-faux: https://codepen.io/anon/pen/gQMwNO https://codepen.io/anon/pen/EOPoBG

The problem is that react-faux example creates duplicate '2000' label after update. Thanks!

Olical commented 5 years ago

At a guess, I'd say that scale mutates the DOM which is not allowed in this context. I can't investigate right this second but that might be a good start. If you can't work it out though I'd highly recommend just using regular D3 within your React tree by using the lifecycle hooks given to you by React. Especially if you'd like to use transitions or animations.

Olical commented 5 years ago

I'm going to close this for now. I think it's because scale mutates the DOM after it's rendered which this library does not support. You'll either have to use the animation mixin (which I don't really have any experience with) or use D3 directly and opt out of React updates with lifecycle hooks, avoiding ReactFauxDOM entirely (this will work fine and you should definitely consider it! :smile:).

I'm only really maintaining parts of this project where there's very clear bugs, but as far as I can tell it's working as intended here, it just doesn't support things that mutate the DOM it's working with.