初探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能夠點擊這裏。