h5 数字变化_前端/h5 D3.js实现根据数据动态更新图形/类似进度实时变化效果
最近接到一个需求,在满足规则下,实现类似这种展示效果,其实就是用图形反映数据(NK,一种干扰值)
运行后,它其实是不断在动的,每格都可能显示灰色或者彩色
这里一共是10个格子,每格代表一个范围边界,说明如下
规则:颜色条設定,共十格 N = 1 - 10,边界值 max value = 2^(N/2) 并取小数点第一位进行四舍五入,得到一组边界值:1/2/3/4/6/8/11/16/23/32,最后一格沒有上限=24~无限大
即是說,数值等于或大于24,到无限大,属于第十級(格)。另外,达到的格显示彩色,未达到的显示灰色
这里要解决2个问题
1.绘制图形
2.动态更新
技术栈:React+d3 v4
1.绘制图形
print = () =>{
const colors=[‘#eeeeee‘,‘#eeeeee‘,‘#eeeeee‘,‘#eeeeee‘,‘#eeeeee‘,‘#eeeeee‘,‘#eeeeee‘,‘#eeeeee‘,‘#eeeeee‘,‘#eeeeee‘,
]//定义svg图形宽高,以及柱状图间距
const svgWidth = 7 *colors.length
const svgHeight= 20const barPadding= 2
//通过图形计算每个柱状宽度
const barWidth = (svgWidth /colors.length)
const svg= d3.select(‘.barChart1‘)
.attr(‘width‘, svgWidth)
.attr(‘height‘, svgHeight)
const barChart= svg.selectAll(‘rect‘)
.data(colors)//绑定数组
.enter() //指定选择集的enter部分
.append(‘rect‘) //添加足够数量的矩形
.attr(‘y‘, d => 0) //d为数据集每一项的值, 取y坐标
.attr(‘height‘, 20) //设定高度
.attr(‘width‘, barWidth - barPadding) //设定宽度
.attr(‘transform‘, (d, i) =>{
const translate= [barWidth * i, 0];return`translate(${translate})`
})//实际是计算每一项值的x坐标
.style(‘fill‘, (d, i) =>d)
}
2.动态更新
update = nkNum =>{
const colors=[‘#40cc80‘,‘#40cc80‘,‘#40cc80‘,‘#40cc80‘,‘#FFFF00‘,‘#FFFF00‘,‘#FFFF00‘,‘#f64b5d‘,‘#f64b5d‘,‘#f64b5d‘,
]
console.log(nkNum,"nkNum")//NK顏色橫條設定,共十格 N = 1-10,max value = 2^(N/2) round to first digit,1/2/3/4/6/8/11/16/23/32,最後一格沒有上限=24~無限
//即是說,數值等於或大於24,到無限大,屬第十級
//没达到的,用#eeeeee表示,达到的用彩色表示
colors.map((t, i)=>{if (nkNum < Math.round(Math.pow(2, (i + 1) / 2))) {
colors[i]= ‘#eeeeee‘}
})
const svg= d3.select(‘.barChart1‘)
const barChart=svg
.selectAll(‘rect‘)
.data(colors)
.style(‘fill‘, (d, i) =>d)
}
值得注意的是,这里我巧妙的利用了循环的索引来计算那一组数 1/2/3/4/6/8/11/16/23/32
Math.round(Math.pow(2, (i + 1) / 2)
3.调用
componentDidMount() {this.print();
}
componentDidUpdate(prevProps, prevState) {
const {
home: { nkNum },
}= this.props;
const {
home: { nkNum: nkNumOld },
}=prevProps;if (nkNum !==nkNumOld) {this.update(nkNum);
}
}
h5 数字变化_前端/h5 D3.js实现根据数据动态更新图形/类似进度实时变化效果相关推荐
- python动态图形_利用matplotlib实现根据实时数据动态更新图形
我就废话不多说了,直接上代码吧! from time import sleep from threading importThread import numpy as np import matplo ...
- 利用d3.js对大数据资料进行可视化分析
insight-labs · 2013/12/19 18:18 作者: [email protected] [email protected] 0x00 背景 对于前段时间流出的QQ群数据大家想必已经 ...
- h5 登录页面_鲁班H5作者:@小小鲁班
前言 偶然的机会在github上逛,看到一个diy H5的项目叫鲁班,多么眼熟的项目名.毕竟曾经有梦想过但最后没做好.那今天我们就来认识下这个项目. 自我介绍 就叫小小鲁班吧(真名可以不说吗) 一只没 ...
- h5课件制作_益阳H5课件制作团队
益阳H5课件制作团队 sa1d45 益阳H5课件制作团队 展厅设计融入高科技,加入多媒体设备,让参观者与企业展厅互动起来,在带来的同时也能加深参观者的印象,让参观者真正投入其中去体验,从而好地解读企业 ...
- d3.js图表_如何使用D3.js建立历史价格图表
d3.js图表 逐步可视化财务数据集的方法 (A step by step approach towards visualizing financial datasets) It is a chall ...
- d3.js折线图_学习使用D3.js创建折线图
d3.js折线图 by Sohaib Nehal 通过Sohaib Nehal 学习使用D3.js创建折线图 (Learn to create a line chart using D3.js) 使用 ...
- 结合d3.js实现气象数据的可视化
概述 本文将结合d3.js实现在mapboxGL中格点气象数据的展示. 效果 实现 1.数据格式说明 需要将格点气象数据实现前端的展示,数据传输的方式有三种:1.json:2.二进制:3.灰度图.三种 ...
- AMap + echarts、google map + d3.js分别实现数据可视化中的飞线图(迁徙图)
首先肯定是给出demo啦: 演示demo 直接到左侧选择框中选择View taxi flow里面随便选个日期 总体介绍 最近由于工作室项目需要做一个数据可视化平台,这个平台最终是交由国外人使用的.而国 ...
- excel图表交互联动_深入讲解EasyShu图表与引用数据动态联动功能
EasyShu一开始的架构是将制作好的图表最终返回给用户,不依赖用户工作表的单元格区域引用,可满足图表绘制后的脱离数据源分享传播,无奈用户最强烈的反馈是要求图表与数据保持联动,这一需求实在对EasyS ...
最新文章
- 外网远程桌面连接设置
- OpenCv实现两幅图像的拼接
- ubuntu系统下创建软件桌面快捷方式
- Springboot 常见请求方式
- Feature Pyramid Networks for Object Detection 论文笔记
- 参数注入:最简方法,直接注入
- 自定义线程类中实例变量与其他线程共享与不共享
- 对 SAP Spartacus 进行服务器端构建时,编译的资源列表
- Linux版本_linux版本信息解析
- php date当天,php5中date()获得的时间不是当前时间的解决方法
- ssd内部是多个flash一起操作_广告设计中Flash图形动画的应用
- WannaCry病毒阴魂不散:本田一家工厂受影响停产一天
- Java| 编译和反编译
- CSDN博客代码块语法高亮
- 阿里巴巴重要开源项目汇总(资料参考)
- 怎么把PDF转换成Word?2种转Word方法技巧
- 第三方支付接口有哪些?怎么申请?
- 小米之家真的是有效的渠道模式么?
- Zbrush学习笔记
- 2020年 java题库
热门文章
- numpy random 生成随机矩阵
- TorchFusion 是一个深度学习框架,主要用于 AI 系统加速研究和开发
- drawContours函数
- Android无线网络调试手机
- 梁体混凝土弹性模量计算_预应力混凝土连续梁多点转向顶推施工技术研究
- java集合转字符串拼接_关于集合和字符串的互转实现方法
- 大学计算机一条指令的执行过程实验,实验四 一条指令的执行过程
- matlab对图像信号进行频谱分析及滤波,数字信号处理课程设计---应用 Matlab对信号进行频谱分析及滤波...
- 树莓派python3.7_[Linux] 树莓派编译python3.7.4
- Tomcat开启SSL协议支持