手动实现一个速度仪表盘

栏目: 后端 · 前端 · 发布时间: 5年前

内容简介:最近正在学习整体效果如下:

前言

最近正在学习 数据可视化 , 这里记录一下一些心得与成果, 采用的技术是 (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-... (本人会在里面不定期增加新图表哦)


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Flash ActionScript 3.0从入门到精通

Flash ActionScript 3.0从入门到精通

章精设、胡登涛 / 清华大学出版社 / 2008-10-1 / 69.00元

Flash ActionScript 3.0的出现,不仅从形式上改变了ActionScript,而且从本质上改变了ActionScript,使ActionScript 3.0成为了真正的面向对象编程语言。 本书从最简单的编程知识出发,带领读者走进编程的大门,是一本不可多得的ActionScript 3.0入门书。本书在注重基础的同时,从更高的层次来介绍ActionScript 3.0的面向对......一起来看看 《Flash ActionScript 3.0从入门到精通》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具