title: Reactjs with D3js treemap
body: <p>Trying to convert Mike Bostock's <a href="http://bost.ocks.org/mike/treemap/" rel="nofollow noreferrer">zoomable treemap</a> into React components.  Part of the way there but not sure about the best way to pass around data between components when that data depends on the rendered DOM (i.e. width).</p>
  
  <p>Came across Ben Smith's <a href="http://10consulting.com/2014/02/19/d3-plus-reactjs-for-charting/" rel="nofollow noreferrer">blog</a> about mixing React and D3js.  Great stuff.</p>
  
  <p>Using Bootstrap to control the CSS styling.  Defined the svg element with an absolute position and max width (100%) inside a relative container:</p>
  
  <pre><code> .svg-container {
     position: relative;
     padding-bottom: 30%;
     overflow: hidden;
     }
  
   .svg-content {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
   } 
  </code></pre>
  
  <p>So the width of the svg element changes as the screen is resized.  Assuming that the treemap node attributes like x,y,dx,dy have to fixed values not procents.  Thinking I have to watch the window's resize event, pick off the new svg element dimensions ("parseInt(d3.select('.svg-content').style('width'), 10);") and force Reactjs to re-render ("React.renderComponent").</p>