Reputation: 1058
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">
Upvotes: 0
Views: 392
Reputation: 1058
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>
)
}
Upvotes: 0