{"action":"created","issue":{"url":"https://api.github.com/repos/Olical/react-faux-dom/issues/57","repository_url":"https://api.github.com/repos/Olical/react-faux-dom","labels_url":"https://api.github.com/repos/Olical/react-faux-dom/issues/57/labels{/name}","comments_url":"https://api.github.com/repos/Olical/react-faux-dom/issues/57/comments","events_url":"https://api.github.com/repos/Olical/react-faux-dom/issues/57/events","html_url":"https://github.com/Olical/react-faux-dom/issues/57","id":164475457,"number":57,"title":"Typescript and mixins","user":{"login":"MichaelBitard","id":414642,"avatar_url":"https://avatars.githubusercontent.com/u/414642?v=3","gravatar_id":"","url":"https://api.github.com/users/MichaelBitard","html_url":"https://github.com/MichaelBitard","followers_url":"https://api.github.com/users/MichaelBitard/followers","following_url":"https://api.github.com/users/MichaelBitard/following{/other_user}","gists_url":"https://api.github.com/users/MichaelBitard/gists{/gist_id}","starred_url":"https://api.github.com/users/MichaelBitard/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/MichaelBitard/subscriptions","organizations_url":"https://api.github.com/users/MichaelBitard/orgs","repos_url":"https://api.github.com/users/MichaelBitard/repos","events_url":"https://api.github.com/users/MichaelBitard/events{/privacy}","received_events_url":"https://api.github.com/users/MichaelBitard/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2016-07-08T07:37:52Z","updated_at":"2016-07-08T08:38:45Z","closed_at":null,"body":"Hi,\r\n\r\nI'm trying to play with D3 and react so I assume this is the place to be.\r\n\r\nI have a typescripted project and I don't know how to make everything work.\r\n\r\nI was able to make this example (https://github.com/Olical/lab/blob/gh-pages/js/react-faux-dom-state/main.js) work with some minor tweaks (ie: I extracted the variable `ReactFauxDOM.createElement('svg')` and called `toReact()` on it instead of `svg.node().toReact()`\r\n\r\nBut when I tried another simple animated example (http://bl.ocks.org/jose187/4733747) I ended with a non animated graph really ugly. So I started playing with componentDidMount but I wasn't able to add the svg to the already existing dom.\r\n\r\nThe source code of my class is here (https://github.com/MichaelBitard/react-blank-project/blob/try_animate/src/components/Topology/Topology.tsx), is there something obvious that I did wrong?"},"comment":{"url":"https://api.github.com/repos/Olical/react-faux-dom/issues/comments/231306067","html_url":"https://github.com/Olical/react-faux-dom/issues/57#issuecomment-231306067","issue_url":"https://api.github.com/repos/Olical/react-faux-dom/issues/57","id":231306067,"user":{"login":"Olical","id":315229,"avatar_url":"https://avatars.githubusercontent.com/u/315229?v=3","gravatar_id":"","url":"https://api.github.com/users/Olical","html_url":"https://github.com/Olical","followers_url":"https://api.github.com/users/Olical/followers","following_url":"https://api.github.com/users/Olical/following{/other_user}","gists_url":"https://api.github.com/users/Olical/gists{/gist_id}","starred_url":"https://api.github.com/users/Olical/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Olical/subscriptions","organizations_url":"https://api.github.com/users/Olical/orgs","repos_url":"https://api.github.com/users/Olical/repos","events_url":"https://api.github.com/users/Olical/events{/privacy}","received_events_url":"https://api.github.com/users/Olical/received_events","type":"User","site_admin":false},"created_at":"2016-07-08T08:38:45Z","updated_at":"2016-07-08T08:38:45Z","body":"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](https://github.com/Olical/react-faux-dom/blob/master/DOCUMENTATION.md#react-component-mixins)). 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."}}
{"actor":{"display_login":"Olical"}}