在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

回答

相关问题