在强制布局图d3.js REACTJS中的矩形内添加文本

Question

我正在尝试使用ReactJS在rect中间显示文本。我尝试过不同的方法，但文本总是在右边的图表中结束。

我正在尝试执行以下操作： 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>
        );
      }

Answer 1

我找到了解决方案，但我并不确切知道为什么会出现此问题。 <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>
        );