内容简介:最近正在学习整体效果如下:
前言
最近正在学习 数据可视化
, 这里记录一下一些心得与成果, 采用的技术是 (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-... (本人会在里面不定期增加新图表哦)
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- Qt自定义控件之仪表盘2--QPaint绘制仪表盘
- Qt自定义Widget之仪表盘
- 开源仪表盘-Dashboard-C#/WF
- ClickHouse:创建漂亮的 Grafana 仪表盘
- ELK学习实验009:安装kibana的仪表盘
- 解决Azure Kubernetes仪表盘报错一例
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
颠覆者:周鸿祎自传
周鸿祎、范海涛 / 北京联合出版公司 / 2017-11 / 49.80元
周鸿祎,一个在中国互联网历史上举足轻重的名字。他被认为是奠定当今中国互联网格局的人之一。 作为第一代互联网人,中国互联网行业最好的产品经理、创业者,他每时每刻都以自己的实践,为互联网的发展贡献自己的力量。 在很长一段时间内,他没有在公共场合发声,甚至有粉丝对当前死水一潭的互联网现状不满意,发出了“人民想念周鸿祎”的呼声。 但周鸿祎在小时候,却是一个踢天弄井,动不动就大闹天宫的超级......一起来看看 《颠覆者:周鸿祎自传》 这本书的介绍吧!