title: ReactJS componentDidMount + render
body: <p>I am currently using react to create d3 visualizations.  I'm a little confused about the relationship between the <code>render</code> and <code>componenetDidMount</code> methods (is methods the proper term?).  Here is what I have (I excluded some code for simplicity):</p>
  
  <pre><code>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 (
          &lt;div className="row pushdown"&gt;
                  &lt;div className="d3-block"&gt;
                      &lt;div className="Chart" /&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>On line 3, <code>el</code> gets assigned <code>this.getDOMNode();</code> which always points to the top level element in the render function (<code>div "row pushdown"</code>).  So does <code>this.getDOMNode()</code> 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 <code>div</code> (<code>.Chart</code>).  I first tried doing <code>this.getDOMNode().find('.Chart')</code> but that didn't work.  </p>
  
  <p>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?  </p>
  
  <p>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?</p>
  
  <p>Third question:  I want to add a chart legend in a sibling <code>div</code> of <code>".Chart"</code>.  Should I be creating a new component for this?  Or in my d3Chart can I use selectors to do this?</p>
  
  <p>Thank you in advance for your help!</p>
  
  <p>P.S.  I have one side question:</p>
  
  <p>I've seen people use <code>React.render(&lt;Chart /&gt;,document.body)</code> instead of using <code>React.createElement</code> within that.  Could somebody explain to me the difference?</p>