Comments (5)
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"
});
.
.
.
}
from react-faux-dom.
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.
from react-faux-dom.
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?
from react-faux-dom.
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.
from react-faux-dom.
Thanks a lot for your answers, I think i'll do what you said!
from react-faux-dom.
Related Issues (20)
- Append StyledComponents by d3? HOT 4
- Cannot append 'svg' properly with 'ReactFauxDOM' HOT 8
- Is it possible to get the stringified DOM? HOT 3
- Uncaught TypeError: (0 , _reactFauxDom.withFauxDOM) is not a function HOT 2
- Limitations HOT 2
- dangerouslySetInnerHTML - How can I set it? HOT 8
- getComputedTextLength() of a faux-element HOT 1
- Circle radius is NaN if adding d3 enter. HOT 9
- Failed to execute 'querySelector' on 'Document': '[object Object]' is not a valid selector. HOT 2
- Expose component propTypes and defaultProps.
- Expose component propTypes and defaultProps. HOT 2
- README may need update HOT 2
- TypeError: "text.node(...).getBBox is not a function" HOT 1
- Duplicate tick labels on axis update HOT 2
- d3.select(...).clone() report error HOT 2
- consider copy static properties to withFauxDOM HOC? HOT 1
- TypeError: node.compareDocumentPosition is not a function HOT 3
- minify react-faux-dom HOT 2
- Integrating React and d3.js with ReactFauxDOM displaying nothing on screen HOT 1
- componentWillMount deprecation HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-faux-dom.