Typescript and mixins about react-faux-dom

[MichaelBitard]

Mmmh, I found a solution but without react-faux-dom, I'm not sur this is the good way to go.

In my render:

public render() {
    return (<div id="graph" style={{width:"1250px", height:"380px"}}></div>)
}

and in componentDidMount:

public componentDidMount() {
    var graph = document.getElementById("graph");

    var svg = D3.select(graph).append('svg')
        .attr({
            width: "1250",
            height: "380"
        });
  .
  .
  .
}

[Olical]

D3 mutates the DOM to animate it, this does not work in React since everything is immutable and thrown away after each render. You can use mixins to get around this (as shown in the documentation). The only way around this without some sort of mixin to help you is to use a React animation library, you can feed those values as they change over time into your chart to animate it manually.

[MichaelBitard]

Ok, That was my main issue, I don't know how to use your mixins with Typescript and I wasn't able to find any examples.

EDIT: Oops sorry I didn't see that you already replied to my question, I'll take a look at the React animation library, thanks. On question remains though, without react-faux-dom I wont be able to use the d3 animation as-is, I will have to translate everything right? If that's the case, is there any way to use the mixins with Typescript?

[Olical]

I'm really not sure about TypeScript integration, I've never used it or really looked at it. You'll probably need to write your own definitions, I don't know how that sort of thing works.

If you use a React animation library you can not use any D3 transforms. If you want to use D3 animation you need to either use the mixins or break out of the React tree as you showed in your second example.

Honestly I'd recommend you go down the latter route. Just skip out of React and ignore react-faux-dom. Then you can use any interaction / animations you want as well as have a slightly easier integration with TypeScript.

For your use case, this doesn't seem like the right tool. It's good for simple things, but begins to breakdown in these cases without compromises.

[MichaelBitard]

Thanks a lot for your answers, I think i'll do what you said!