首页 文章

只有在放大或缩小IE-11后，SVG <rect />才会在初始加载时显示颜色

提问于
浏览 次
0

我有一个在 table 里面 . 初始加载完成后，不显示颜色 . 只有在我缩小或显示后才会出现颜色 .

<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);

我在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”>

enter image description here

javascript html d3.js svg reactjs

1 回答

  • 0

    我通过从component中删除转换并在componentDidMount中选择ref时添加attr（ x ，...）解决了这个问题 . 我从来没有能够使它适应过渡 .

    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>
    )
}
    回复于

相关问题