基本绘制

柱形图基本绘制方法,注意enter的使用,免去了事先写好rect元素的麻烦

//设置画布
var width = 400
var height = 400
var svg = d3.select('body').append('svg').attr('width',width).attr('height',height)
//设置柱形图数据集
var dataset = [50,43,120,87,99,167,142]//柱形图数据集
//设置柱形图元素
var rectStep = 35
var rectWidth =30var rect = svg.selectAll("rect").data(dataset).enter()//选中只有数据没有元素的部分.append('rect')//由于没有元素所以要添加元素.attr('fill','steelblue')//设置颜色.attr('x',(d,i)=>i*(rectWidth + 3))//设置横坐标,+3是设置柱形图之间的间隙.attr('y',(d)=>height-d)//反转.attr('width',rectWidth).attr('height',(d)=>d)

数据更新

分别对update,enter和exit三个部分做处理

update如果不做处理,则不会有新的排序,因为配对的没有改变,还是之前画好的
enter不做改变,则不会增加,因为只增加了数据,没有对应的元素

    <script>//设置画布var width = 400var height = 400var svg = d3.select('body').append('svg').attr('width',width).attr('height',height)//设置柱形图数据集var dataset = [50,43,120,87,99,167,142]//柱形图数据集//设置柱形图元素var rectStep = 35var rectWidth =30var rect = svg.selectAll("rect").data(dataset).enter()//选中只有数据没有元素的部分.append('rect')//由于没有元素所以要添加元素.attr('fill','steelblue')//设置颜色.attr('x',(d,i)=>i*(rectWidth + 3))//设置横坐标,+3是设置柱形图之间的间隙.attr('y',(d)=>height-d)//反转.attr('width',rectWidth).attr('height',(d)=>d)</script> <button type='button' onclick="mysort()">排序</button><button type='button' onclick="myadd()">增加</button><script>function draw(){var update = svg.selectAll('rect').data(dataset)var enter = update.enter()var exit = update.exit()update.attr('fill','steelblue')//设置颜色.attr('x',(d,i)=>i*(rectWidth + 3))//设置横坐标,+3是设置柱形图之间的间隙.attr('y',(d)=>height-d)//反转.attr('width',rectWidth).attr('height',(d)=>d)enter.append('rect').attr('fill','steelblue')//设置颜色.attr('x',(d,i)=>i*(rectWidth + 3))//设置横坐标,+3是设置柱形图之间的间隙.attr('y',(d)=>height-d)//反转.attr('width',rectWidth).attr('height',(d)=>d)exit.remove()}function mysort(){dataset.sort(d3.ascending)draw()}function myadd(){dataset.push(Math.floor(Math.random()*100))draw()}

D3 BarChart相关推荐

D3.js 01绘制BarChart
转载于B站小魁少爷的D3.js教程非常不错的教程
h5 数字变化_前端/h5 D3.js实现根据数据动态更新图形/类似进度实时变化效果
最近接到一个需求,在满足规则下,实现类似这种展示效果,其实就是用图形反映数据(NK,一种干扰值) 运行后,它其实是不断在动的,每格都可能显示灰色或者彩色这里一共是10个格子,每格代表一个范围边界,说 ...
如何创建多个条形图_学习使用D3创建条形图-初学者教程
如何创建多个条形图 D3.js is the most popular JavaScript library for creating visual representations of your d ...
使用JavaScript和D3.js实现数据可视化
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由独木桥先生发表于云+社区专栏介绍 D3.js是一个JavaScript库.它的全称是Data-Driven Documents(数 ...
NodeJS+Vue3+D3
文章目录一.任务目标二.代码实现主要部分 1. App.vue文件中加入力导向图 2. 编写力导向图的js文件 3. 编写力导向图的js文件 4. 编写直方图的js文件三.注意事项四.结果展示 ...
中国近三年上市公司信息统计(主板、创业板、科创板)-web数据可视化(d3.brush-时间选择器)
1.先看效果. 哔哩哔哩在线解读演示: 中国近三年上市公司信息统计(主板.创业板.科创板)-web数据可视化(时间选择器)-000009_哔哩哔哩_bilibili 中国近三年上市公司信息统计(主板. ...
Vue+D3 绘制条形图和力导向图
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 Vue+D3 绘制条形图和力导向图准备:D3代码 1.条形图 2.力导向图本篇blog在于把已经编写好的D3代码从一般HTML文件 ...
从壹开始微服务 [ DDD ] 之一 ║ D3模式设计初探与我的计划书
缘起哈喽大家周四好!又是开心的一天,时间过的真快,我们的 <从壹开始 .net core 2.1 + vue 2.5 >前后端分离系列共 34 篇已经完结了,当然以后肯定还会有更新和修改 ...
D3.js、HTML5、canvas 开发专题
https://www.smartdraw.com/genogram/ http://www.mamicode.com/info-detail-1163777.html D3折线图 https:// ...

D3 BarChart

基本绘制

数据更新

D3 BarChart相关推荐

最新文章

热门文章