前言
最近正在学习数据可视化, 这里记录一下一些心得与成果, 采用的技术是 (svg + react + d3)。 这种实现可视化方式本人个人感觉超级不错，如果你是有一定的基础的同学，强烈推荐一下。
效果
整体效果如下：
这个是普通的速度仪表盘，有没有开发太多的动态交互，唯一的交互是点击图片最上面的加速与减速就能够调整速度了。
开发思路
搭建开发环境
使用create-react-app创建一个新的项目，添加依赖d3
yarn add d3初始化数据
这里速度范围是[0, 200], 对应角度范围个人设置是[150, 390], 很明显这是一个线性比例尺。速度间隔是2。代码如下
const scale = d3.scaleLinear().domain([0, 200]).range([150, 360 + 30])
const ticks = scale.ticks(100) // 200 / 2 => 100 构建外部圈
function Chart(props) {
const { width, height, margin } = props
return (
<svg width={width} height={height}>
<g transform={`translate(${margin.left}, ${margin.top})`}>
{
props.children
}
</g>
</svg>
)
}
......
export default class Meter extends Component {
...
render () {
// config => {width: xxx, height: xxx, margin: xxx}
return (
<div className={'container'}>
<Chart {...config}>
<g>
<circle cx={0} cy={0} r={204} fill={'rgba(158, 158, 158, .4)'}></circle>
<circle cx={0} cy={0} r={196} fill={'#FFF'}></circle>
<circle cx={0} cy={0} r={200} fill={'transparent'} stroke={'#000'}></circle>
</g>
</Chart>
</div>
)
}
}上面其实是绘画了三个圆， 利用SVG后面的绘制的图画，会覆盖前面的图画的特性。先画最外面，然后最里面，最后中间的圆。 就把最外层的圈给描绘出来了，效果如下：
描绘刻度尺
接着上面的代码结构，我们开始刻画刻度尺
......
export default class Meter extends Component {
...
render () {
// config => {width: xxx, height: xxx, margin: xxx}
return (
<div className={'container'}>
<Chart {...config}>
<g>
<circle cx={0} cy={0} r={204} fill={'rgba(158, 158, 158, .4)'}></circle>
<circle cx={0} cy={0} r={196} fill={'#FFF'}></circle>
<circle cx={0} cy={0} r={200} fill={'transparent'} stroke={'#000'}></circle>
</g>
<g fill={'transport'} stroke={'#000000'}>
{
ticks.map((tick) => {
let IS_20_TIME = tick % 20 === 0
let title = IS_20_TIME ? <text x={160} dominantBaseline={'middle'} textAnchor={'end'}>{tick}</text> : ''
return (
<g transform={`rotate(${scale(tick)})`} key={tick}>
<path d={`M165, 0L185,0`} strokeWidth={IS_20_TIME ? 3 : 1}></path>
{title}
</g>
)
})
}
</g>
</Chart>
</div>
)
}
}这里刻画刻度尺，我的思路很简单，刻度尺是对速度大小的描述，而速度跟角度又是线性相关，反过来，速度对应角度。所以，我只是需要根据速度所对应的角度，而对水平刻度进行旋转即可。效果大家可以看到：
指向针
指向针其实就是一个圆 + 三角形的组合，代码如下：
<circle cx={0} cy={0} r={10} fill={'#'}></circle>
<path d={`M-20, 5L-20, -5L130, 0Z`} transform={`rotate(150)`}>
<animateTransform ></animateTransform>
</path>上面本人实现的比较粗糙，大家可以把这个封装成一个shape, 以后可以直接复用的，后面如果需要旋转，可以通过<g>元素来实现。
到这一步，一个简单的仪表盘就初具原型了
控制指针转动
指针的转动是根据速度来的，所以我们需要先定义一个speed的状态。
constructor(props) {
super(props)
this.state = {
speed: 0
}
}接下来，我们需要把speed映射到指针上面。怎么处理呢
还记得前面定义的scale，这个是一个线性比例尺，通过它我们能够获取不同速度对应的角度
我们把上面的指向针代码进行改造
const {speed} = this.state
......
<circle cx={0} cy={0} r={10} fill={'#'}></circle>
<path d={`M-20, 5L-20, -5L130, 0Z`} transform={`rotate(${scale(speed)})`}>
<animateTransform ></animateTransform>
</path>这样我们设置不同的speed就能在页面控制指针指向不同的刻度尺。
速度标识区间
所谓的速度标识区间，其实就是几段圆弧，通过不同的颜色来告知进入不同的速度区间。
这里我对圆弧进行了封装，底层通过d3的arc方法来创建圆弧。
function LArc(props) {
const { start, end, color } = props
let _arc = d3.arc()({
innerRadius: 165,
outerRadius: 185,
startAngle: Math.PI * 2 * (scale(start) + 90) / 360,
endAngle: Math.PI * 2 * (scale(end) + 90) / 360
})
return (
<path d={_arc} fill={color}></path>
)
}这里其实还有一个问题，就是需要先加载速度标识区间，然后再去添加刻度尺，不然标识区间会覆盖刻度尺(切记)。
这样一个基本速度仪表盘就出来了
如果你能明白上面的实现思路，我觉得你可以自己实现一个时钟了
如果你想了解更多：比如指示器如何实现的
请参考
https://github.com/cookhot/i-…
(本人会在里面不定期增加新图表哦)
