初探React与D3的结合-或许是visualization的新突破？

自诞生之初截止目前（2016年初），React能够说是前端界最流行的话题，若是你还不知道React是何物，你就该须要充充电了。

d3是由纽约时报工程师开源的一个绘制基于svg的数据可视化工具，是近几年最流行的visualization工具库之一。d3提供丰富的svg绘制API、动画甚至布局等功能，目前市面上大多数visualization仓库是由d3构建的。d3的优点在于将data与DOM绑定，理想化的方案是直接操做data而不是操做DOM来实现UI的更新，从这个角度上讲，d3的理念与React有殊途同归之妙。

既然二者有类似之处，那么二者的结合会迸发出什么样的火花呢？

注：React和d3的结合优点主要体如今动态化的charts上，静态的charts并不明显。

首先咱们分析一下React和d3应用在visualization领域的优点和不足。

React的优点：

• 高效的diff算法能够提高动态化chart的性能表现；
• React将props和state分离的理念很是适合visualization，将不变的数据定义为props，动态的数据定义为state。这样数据改变时，使用setState()更新组件UI。

React的不足：

• 动画库不丰富；
• 在svg的操做和算法方面不如d3成熟。

d3的优点：

• data与DOM绑定，操做data实现UI更新；
• 丰富的svg API和动画，同时提供基本的chart布局方案。

d3的不足：

• UI更新算法不够高效，大多数状况下，细节数据的改变须要从新绘制整个chart；

对比React和d3各自的优缺点会发现二者在某些方面是互补的，笔者在项目技术选型初期对二者的结合很是看好（虽然项目最终没有采用二者的任何一个，但并非由于二者不适合，而是由于要兼容万恶的低版本IE...）。

下面简单介绍一下实现方案，读者能够对照demo阅读：

See the Pen react-d3-dial_chart by Joe (@ihardcoder) on CodePen.

咱们的目的是充分利用React和d3各自的优点，结合上文提到的特性，最终采用以下方案：

• 不使用d3的绘制API，而是由React生成DOM，这样即可以将UI更新细节到每一个节点；
• 使用d3的svg算法，生成的结果做为React组件的props或state；
• 使用d3的动画API弥补React动画方面的不足；
• 某些特殊动画须要使用d3的绘制API。

对照demo，咱们建立一个Dialchart。首先咱们要建立一个供全局调用的class：

/**
 * @desc 入口函数
 * @param container-{DOM Element}: chart外层容器，通常由模板指定
 * @param opts-{Object}: 数据和配置选型的集合对象
 * @return chart实例-{React Object}
 **/
class Dial {
  constructor(container,opts){
    // ...
    this.init();
  }
  init(){
    // ...
    this.DOM = React.render(
      <DialDOM size={_size} fontSize={_fontSize} fontFamily={_fontFamily} dataset={this.dataset}/>,
      this.container
    );
  }
  /**
   * @desc 更新组件的state，可用于响应式
   * @param opts-{Object}: 配置参数
   **/
  update(opts){
    if(!opts){
      return;
    }
    if(opts.fontSize){
      this.DOM.setState({
        fontSize: opts.fontSize
      });
    }
    if(opts.size){
      this.DOM.setState({
        size: opts.size
      });
    }
  }
}

咱们省略了一些细节代码，完整代码请参照demo

上述代码中最主要的动做是render了一个React组件，有一个细节须要注意，咱们将size等数据做为props传入组件，可是在update函数中却使用的是setState，这里面有一个很是重要的步骤：在DialDOM组件内首先要把props映射为state。这样咱们在setState时即可以不破坏React的props不能修改的约定。

DialDOM组件的代码以下：

const DialDOM = React.createClass({
  getDefaultProps() {
    return {
        fontSize: 12,
        fontFamily: 'inherit',
        fontColor: 'inherit'  
    };
  },
  getInitialState() {
    // size和fontSize能够改变，因此做为组件的state使用
    return {
      size: this.props.size,
      fontSize: this.props.fontSize        
    };
  },
  render(){
    const _data = this.props.dataset.children;
    let _Arcs = [];
    let _total = _data.length;
    let _average = 2/_total*Math.PI;
   
    if(_data){
      for(let i=0;i<_total;i++){
        let _startAngle = _average*i - _rotate;
        let _endAngle = _startAngle + _step;        
        _Arcs.push(<DialArc radius={this.state.size/2} 
                   dataset={_data[i]} 
                   key={i} />);
      }
    }
    let _transform = d3.transform('translate('+this.state.size/2+','+this.state.size/2+')');               
    return(
      <DialBox size={this.state.size} fontSize={this.props.fontSize} fontFamily={this.props.fontFamily} >
        {_Arcs}
        <DialMidText 
        finalscore={this.props.dataset.score} 
        rank={this.props.dataset.rank} 
        transform={_transform}/>
      </DialBox>
    );
  }
});

上述代码并非完整的，完整代码请参照demo

上述代码有如下几点须要注意：

1. getDefaultProps方法声明一些默认的props，保证渲染出的UI正确性；
2. getInitialState方法将props映射为state。正如上文提到的，这样作是为了保证props的惟一不变性。不是全部的props都须要映射为state，state应当只是一些动态的数据。固然，demo中的代码并非完美的，有兴趣的读者能够研究进一步优化。
3. 上述代码中使用d3的transform方法计算svg的transform，正如上文所述，这是React与d3结合的一个细节。

DialDOM组件小范围结合了React和d3，这只是二者结合的优点之一。下面咱们参照DialArc组件展现如何将d3的动画应用到组件内：

// 表盘外围圆弧
    const DialArc = React.createClass({
      getInitialState() {
          return {
            pathArc: '',
            arcID: 'arc_' + this.props.range + (new Date()).getTime()
          };
        },
        componentDidMount() {
          let _arcAniTime = 600,
            _textAniTime = 300,
            _tickAniTime = 50;
          // path动画
          let _endAngle =  this.props.endAngle;
          let _arc = d3.svg.arc().innerRadius(this.props.radius-this.props.padding-this.props.border).outerRadius(this.props.radius-this.props.padding).startAngle(this.props.startAngle);
          let path = d3.select(this.refs.path);
          path.datum({endAngle: this.props.startAngle});
          path.transition().duration(_arcAniTime).attrTween('d', function(d){
            let interpolate = d3.interpolate(d.endAngle,_endAngle);
            return function(t){
              d.endAngle = interpolate(t);
              return _arc(d);
            }
          });  
          //text动画
          let text = d3.select(this.refs.text);
          text.transition().delay(_arcAniTime).duration(_textAniTime).style('opacity','1');
          // tick动画
          for (let i = 0; i < 20; i++) {
            d3.select(React.findDOMNode(this.refs['tick_' + i])).transition().delay(30 * i).duration(30).style('opacity', 0.4);
          }
          let score_ticks_num = Math.floor(this.props.dataset.score * this.props.ticksum / 100);
          for (let i = 0; i < score_ticks_num; i++) {
            d3.select(React.findDOMNode(this.refs['tick_' + i])).transition().delay(_arcAniTime+_textAniTime + _tickAniTime * i).duration(_tickAniTime).style('opacity', 1);
          }
        },
        render() {
          let _arc = d3.svg.arc().innerRadius(this.props.radius - this.props.padding - this.props.border).outerRadius(this.props.radius - this.props.padding).startAngle(this.props.startAngle).endAngle(this.props.endAngle);
          let _transform = d3.transform('translate(' + this.props.radius + ',' + this.props.radius + ')');
          let ticks = [];
          for (let i = 0; i < this.props.ticksum; i++) {
            let _ref = 'tick_' + i;
            ticks.push( <DialTick startAngle = {this.props.startAngle + this.props.tickstep * i}
              endAngle = {this.props.startAngle + this.props.tickstep * (i + 2 / 3)}
              radius = {this.props.radius - this.props.padding - this.props.border}
              color = {this.props.dataset.color}
              key = {i}
              ref = {_ref}/>);
            }
            return ( 
            <g transform = {_transform}>
              <path ref = 'path' id = {this.state.arcID} d = {_arc()} fill = {this.props.dataset.color}> </path>
              <text ref='text' dx='50%' dy='-10px'textAnchor='end' style={{opacity:0,fontSize: this.props.fontSize}}
              fill={this.props.fontColor}>
                 <textPath xlinkHref={'#'+this.state.arcID}>{this.props.dataset.name}</textPath>
              </text>
              {ticks}
              </g>
            );
          }
    });

DialArc组件中使用了React组件生命周期中的componentDidMount方法，这个方法在render方法执行完毕后被执行。

咱们在render方法中只建立了初始状态的组件UI，而后再componentDidMount方法中使用d3建立了一些动画。这些动画是直接操做DOM，可是并未对组件的props或state作任何操做。

这样作的缘由主要是受限于React并不成熟的动画机制，为了不再次触发组件render，因此直接操做DOM。虽然这样作是React的反模式（React不建议DOM操做），不过目前来讲，这是笔者可以想到的最佳方案了。

总结

以上即是笔者对React结合d3实现visualization的初步探索，但愿可以提供给有相关开发人员一些启示，确定不是最佳方案，若是有兴趣，能够联系笔者一块儿讨论。

笔者的项目最终并未采用以上方案，由于React对IE8的兼容性并不理想，d3更是彻底不兼容IE8及如下版本。项目最终使用Raphael。Raphael不是面向svg的，在不支持svg的浏览器中生成vml格式的chart以实现兼容，demo能够点击这里。