自诞生之初截止目前(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可以点击这里

初探React与D3的结合-或许是visualization的新突破?的更多相关文章

  1. 【译】用 React 和 D3 创建图表

    本文翻译自:https://dzone.com/articles/charts-with-modern-react-and-d3 本文将介绍如何利用 D3JS 和 ReactJS 来创建基础图表. R ...

  2. 初探React,将我们的View标签化

    前言 我之前喜欢玩一款游戏:全民飞机大战,而且有点痴迷其中,如果你想站在游戏的第一阶梯,便需要不断的练技术练装备,但是腾讯的游戏一般而言是有点恶心的,他会不断的出新飞机.新装备.新宠物,所以,很多时候 ...

  3. 初探react

    知道这个框架有一段时间了,可是项目中没有用到,也懒得整理,最近两天比较清闲,又想起了它.好了,废话不多说了,都是干货. react是个什么框架? 为什么用react? react 的原理 react有 ...

  4. 初探React Hooks & SSR改造

    Hooks React v16.8 发布了 Hooks,其主要是解决跨组件.组件复用的状态管理问题. 在 class 中组件的状态封装在对象中,然后通过单向数据流来组织组件间的状态交互.这种模式下,跨 ...

  5. 初探react(一)

    我们学习react首先是要了解react是什么,以及他的特点. React 是一个用于构建用户界面的 JAVASCRIPT 库,起源于 Facebook 的内部项目,用来架设 Instagram 的网 ...

  6. [React] React Fundamentals: Integrating Components with D3 and AngularJS

    Since React is only interested in the V (view) of MVC, it plays well with other toolkits and framewo ...

  7. React事件初探

    作者:朱灵子 React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库.创造 React 是为了解决一个问题:构建随着时间数据不断变化的大规模应用程序 ...

  8. D3.js(v3)+react 制作 一个带坐标与比例尺的散点图 (V3版本)

    上一章做了柱形图,https://www.cnblogs.com/littleSpill/p/10835041.html   这一章做散点图.   散点图(Scatter Chart),通常是一横一竖 ...

  9. D3.js(v3)+react 制作 一个带坐标与比例尺的柱形图 (V3版本)

    现在用D3.js + react做一个带坐标轴和比例尺的柱形图.我已经尽力把代码全部注释上了,最后我也会把完整柱形图代码奉上.如果还有疑惑的,可以去翻看一下我之前介绍的方法,以下方法都有介绍到. 还有 ...

随机推荐

  1. SQL反模式学习笔记2 乱穿马路

    程序员通常使用逗号分隔的列表来避免在多对多的关系中创建交叉表, 将这种设计方式定义为一种反模式,称为“乱穿马路”. 目标:  存储多属性值,即多对一 反模式:将多个值以格式化的逗号分隔存储在一个字段中 ...

  2. 蓝桥杯刷题,第四界省赛B组

    题头,本内容的题目和部分内容均来自博客:https://blog.csdn.net/ryo_218/article/details/79704030 ,在此感谢. 1. 题目标题:高斯日记大数学家高斯 ...

  3. angularjs和jquery前端发送以http请求formdata数据

    formdata是比较常见的前端发送给后端的请求,不仅可以上传数据,而且同时可以上传文件. jquery使用http请求上传formdata数据的方法: var formdata = new Form ...

  4. BZOJ.2054.疯狂的馒头(并查集)

    BZOJ 倒序处理,就是并查集傻题了.. 并查集就是确定下一个未染色位置的,直接跳到那个位置染.然而我越想越麻烦=-= 以为有线性的做法,发现还是要并查集.. 数据随机线段树也能过去. //18400 ...

  5. Django——小结

    课程介绍 MVC MVC框架的核心思想是:解耦,让不同的代码块之间降低耦合,增强代码的可扩展性和可移植性,实现向后兼容 M:Model,主要封装对数据库层的访问,对数据库中的数据进行增.删.改.查操作 ...

  6. NOIP-比例简化

    题目描述 在社交媒体上,经常会看到针对某一个观点同意与否的民意调查以及结果.例如,对某一观点表示支持的有 1498 人,反对的有 902 人,那么赞同与反对的比例可以简单的记为 1498:902 . ...

  7. JDK各个版本的新特性

    对于很多刚接触java语言的初学者来说,要了解一门语言,最好的方式就是要能从基础的版本进行了解,升级的过程,以及升级的新特性,这样才能循序渐进的学好一门语言.今天先为大家介绍一下JDK1.5版本到JD ...

  8. 记录一种下载https网址中的mp4文件的方法

    需要下载一个网页中的视频, 页面中的视频播放器为 JW player, 通过搜索发现可以下载对应的视频. 1. 使用chrome浏览器分析 网页中的视频地址: F12或者右键-->检查, 在打开 ...

  9. laravel-神奇的服务容器(转)

    原文地址: http://www.insp.top/learn-laravel-container ,转载务必保留来源,谢谢了! 容器,字面上理解就是装东西的东西.常见的变量.对象属性等都可以算是容器 ...

  10. boot+Xss防攻击的处理方案

    以下是boot+Xss防攻击的(解决处理JSON入参)处理方案,第二个亲测有效 https://www.jianshu.com/p/3e4b00b8ff3ahttps://www.jianshu.co ...