title: Reactjs + D3 v4 projection issue
body: <p>I have been on this for 10 hours now and I am starting to think that it is either something really small or something fundamental I am missing here.</p>
  
  <p>This is a simple component that all I want is to render the us map with the d3 version 4 via geoAlbersUsa and PROJECT it in a panel so that it is SCALED. If I remove the projection all works great and I get the map. The moment in any shape or form I do the projection it simply shows a colored rectangle. Here is the code:</p>
  
  <pre><code>import React from 'react';
  import * as d3 from 'd3';
  import * as topojson from 'topojson';
  import { Panel, Alert } from 'react-bootstrap';
  
  class MapBlock extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          states: []
      };
      this.projection = d3.geoAlbersUsa().scale(1000);
      this.geoPath = d3.geoPath().projection(this.projection);
  }
  
  componentDidMount() {
      d3.json("https://d3js.org/us-10m.v1.json", function(error, us) {
          if (error) throw error;
          this.setState({states: topojson.feature(us, us.objects.states).features})
      }.bind(this));
  }
  
  render() {
      let { states } = this.state;
      return (
          &lt;Panel&gt;
              &lt;svg width="550" height="430"&gt;
                  &lt;g className="states"&gt;
                      {
                          states.map((feature, index) =&gt; &lt;path key={index} d={this.geoPath(feature)} /&gt;)
                      }
                  &lt;/g&gt;
              &lt;/svg&gt;
          &lt;/Panel&gt;
      )
  }
  }
  
  export default MapBlock
  </code></pre>
  
  <p>The html is also pretty simple:</p>
  
  <pre><code>&lt;Grid&gt;
      &lt;Row className="show-grid"&gt;
          &lt;Col sm={12} md={6}&gt;
              &lt;MapBlock /&gt;
          &lt;/Col&gt;
          &lt;Col sm={12} md={6}&gt;
              Some Text ...
          &lt;/Col&gt;
     &lt;/Row&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>Any help is appreciated and please let me know if the details are not enough. Thanks in advance.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>Here is what I get now trying to work with the suggestion from the initial comment from @Mark.</p>
  
  <p><a href="https://i.stack.imgur.com/MnI0z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MnI0z.png" alt="enter image description here"></a>
  I tried something like this:</p>
  
  <pre><code> var states = topojson.feature(us, us.objects.states).features;
  
   var width  = 560;
   var height = 300;
  
   var b = path.bounds(states[0]),
       s = .98 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1]  - b[0][1]) / height),
       t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
  
   // Update the projection to use computed scale &amp; translate.
   projection
       .scale(s)
       .translate(t);
  
   vis.selectAll("path")
       .data(states)
       .enter()
       .append("path")
       .attr("class", "states")
       .attr("d", path);
  </code></pre>
  
  <p>For this I changed to render to be just:</p>
  
  <pre><code>&lt;Panel&gt;
      &lt;div id="vis"&gt;&lt;/div&gt;
  &lt;/Panel&gt;
  </code></pre>
  
  <p>What I am not sure here is <code>path.bounds(states[0])</code> was a guess of mine just so I can see if it would work based on the panel boundary I have. I did "scale" it as you can see from the image but I guess not exactly :)</p>