I am currently using react to create d3 visualizations. I'm a little confused about the relationship between the render
and componenetDidMount
methods (is methods the proper term?). Here is what I have (I excluded some code for simplicity):
var Chart = React.createClass({
componentDidMount: function () {
var el = this.getDOMNode();
console.log(el);
d3Chart.create(el, {
width: '500',
height: '300'
}, this.getChartState(),this.getAccessState);
},
render: function () {
return (
<div className=row pushdown>
<div className=d3-block>
<div className=Chart />
</div>
</div>
);
}
}
On line 3, el
gets assigned this.getDOMNode();
which always points to the top level element in the render function (div row pushdown
). So does this.getDOMNode()
always refer to the top level element in the render function? What I'm actually trying to do is render the d3 chart within the innermost div
(.Chart
). I first tried doing this.getDOMNode().find('.Chart')
but that didn't work.
First question: I know that I shouldn't be trying to touch the real DOM here but how would I go about selecting something further down on the VirtualDOM?
Second question: I know that, given I am very new to this, am probably doing this the wrong way. Can you suggest a better method here?
Third question: I want to add a chart legend in a sibling div
of .Chart
. Should I be creating a new component for this? Or in my d3Chart can I use selectors to do this?
Thank you in advance for your help!
P.S. I have one side question:
I've seen people use React.render(<Chart />,document.body)
instead of using React.createElement
within that. Could somebody explain to me the difference?