初探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各自的优势，结合上文提到的特性，最终采用如下方案：

对照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 }); } } }

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

上述代码中最主要的动作是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> ); } });

上述代码并不是完整的，完整代码请参照

上述代码有以下几点需要注意：

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的初步探索，希望能够提供给有相关开发人员一些启示，肯定不是最佳方案，如果有兴趣，可以联系笔者一起讨论。