在rect中添加文本的強制佈局圖d3.js REACTJS

我正在嘗試使用ReactJS在rect中顯示文本。我已經嘗試過允許不同的方式，但文本總是在右側的圖表的外側結束。在rect中添加文本的強制佈局圖d3.js REACTJS

我努力做到以下幾點： http://bl.ocks.org/mbostock/7341714

我得到以下結果：

我怎樣才能獲得60號出現在矩形的中間？

這裏是我的代碼：

var BarChart = React.createClass({ 

     getInitialState: function() { 
     return {props: this.props}; 
     }, 

     componentWillReceiveProps: function(nextProps) { 
     this.setState({ 
      props: nextProps 
     }); 
     }, 

     render: function() { 
     return (
      <svg width={this.state.props.width} height={this.state.props.height}> 
      <g style={{strokeWidth:4, stroke:"black"}}> 
       <rect fill={"white"} width={146} height={18}/> 
       <text> {this.state.props.propValue} </text> 
      </g> 
      </svg> 
     ); 
     }

來源

2015-09-01 barracuda

我只能加酒吧內的文本，如果我取代{} this.state.props.propValue用一個非React JS變量。如果我用簡單的字母替換它，文本將正確顯示在裏面。 – barracuda

我找到了解決辦法，但我不知道爲什麼這個問題的發生。 <text> </text>中的值必須是字符串值，而{this.state.props.propValue}是整數。

我添加.toString（）到{this.state.props.propValue}我的問題已解決。

下面是最終的結果：

解決代碼：

 render: function() { 
     var val = this.state.props.propValue; 
     return (
      <svg width={this.state.props.width} height={this.state.props.height}> 
      <g style={{strokeWidth:2, stroke:"black"}}> 
      <rect fill={"white"} width={146} height={18} y={1} x={1}/> 
      </g> 
      <DataSeries data={this.state.props.propValue} width={w} height={h} color={this.state.props.propColor} /> 
      <text> {val.toString()} </text> 
      </svg> 
     );

來源

2015-09-01 21:13:04 barracuda

在rect中添加文本的強制佈局圖d3.js REACTJS

回答

相關問題