SVG <rect /> not displaying color on initial load, only after zoom in or out IE-11

Question

I have a that is inside a Table. When the initial load is done the color is not displayed. Only after I zoom out or in will the color appear.

<table>
  <tbody>
    <tr>
      <td>

         <rect fill={this.state.props.color} x={this.props.offset} y={this.props.offset}
          width={0} height={this.state.props.height}  />
      </td>
    </tr>
  </tbody>
</table>

d3.select(React.findDOMNode(this))
  .transition()
  .ease('linear')
  .delay(300)
  .duration(1000)
  .attr("width", this.state.props.width);

I have the following meta in the html:

meta http-equiv="X-UA-Compatible" content="IE=edge" />

script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8">

Answer 1

I solved this issue by removing the transition from IE and adding the attr( x , ...) when selecting the ref in the componentDidMount. I was never able to make it work with the transition.

componentDidMount: function () {
     var rectref = this.refs.rectref;
     d3.select(rectref)
         .attr("width", this.state.props.width)
         .attr("x", this.props.offset);
},

render: function() {
    return (
        <table>
          <tbody>
            <tr>
              <td>
                 <rect ref="rectref" fill={this.state.props.color} x={this.props.offset} y={this.props.offset}
                  width={0} height={this.state.props.height}  />
              </td>
            </tr>
          </tbody>
        </table>
    )
}