d3绘制基本的柱形图的实现代码


Posted in Javascript onDecember 12, 2018

柱形图,是使用柱形的长短来表示数据变化的图表,也是最简单的图表之一。一般情况下,柱形图包括:矩形、坐标轴和文字。

d3简单理解就是通过在svg画布上绘制基本图形,本文将介绍d3绘制基本的柱形图

绘制画布

import * as d3 from "d3";
var width=300;//svg画布宽
var height=200;//svg画布高
//定义画布
var svg=d3.select("body")
  .append("svg")
  .attr("width",width)
  .attr("height",height)
  .style("background-color","yellow")

绘制矩形

var rectWidth=30;//每个矩形的默认宽度
svg.append("rect")
.attr("width",rectWidth-2)
.attr("height",40)
.attr("x",0)
.attr("y",200)
.attr("transform",`translate(0,${-40})`)

svg.append("rect")
.attr("width",rectWidth-2)
.attr("height",20)
.attr("x",rectWidth)
.attr("y",200)
.attr("transform",`translate(0,${-20})`)

结果

d3绘制基本的柱形图的实现代码

总结

1.画布上的坐标轴方向:

  • x轴方向为水平向右;
  • y轴方向为垂直向下;

2.矩形的基本属性:

  • x,y分别对应矩形左上角的坐标轴;
  • width,height分别对应矩形的宽和高;
  • (本示例的数据可视化通过高度来体现)

3.由于默认的y轴方向为垂直向下,所以为了绘制柱形图,我们需要通过attr矩形的transform属性对矩形进行翻转;

4.默认的矩形填充颜色为黑色;

绑定数据

var dataset=[45,70,12,79,4,127,33,90];
svg.selectAll("rect")
.data(dataset)
// .attr("fill","white")
.enter()
.append("rect")
.attr("width",rectWidth-2)
.attr("height",function (d,i) {
   return d
})
.attr("x",function (d,i) {
   return rectWidth*i
})
.attr("y",200)
.attr("transform",function (d,i) {
  return `translate(0,${-d})`
})
.attr("fill","blue")

结果

d3绘制基本的柱形图的实现代码

可以发现前两个矩形的填充颜色和数据并没有发生变化,后面的蓝色矩形为绑定数据后新append的元素;

如果前两个矩形我们不设置高度,是否会通过数据集绑定上相关数据呢?

svg.append("rect")
svg.append("rect")
var dataset=[45,70,12,79,4,127,33,90];
svg.selectAll("rect")
.data(dataset)
// .attr("fill","white")
.enter()
.append("rect")
.attr("width",rectWidth-2)
.attr("height",function (d,i) {
   return d
})
.attr("x",function (d,i) {
   return rectWidth*i
})
.attr("y",200)
.attr("transform",function (d,i) {
  return `translate(0,${-d})`
})
.attr("fill","blue")

结果

d3绘制基本的柱形图的实现代码

结果发现前两个矩形不设置相关属性和值的情况下,也没有和数据集进行绑定,进行相关的可视化工作。

如果我们在绑定数据后立刻attr矩形的属性呢?是否会有所改变呢?

svg.append("rect")
.attr("width",rectWidth-2)
.attr("height",40)
.attr("x",0)
.attr("y",200)
.attr("transform",`translate(0,${-40})`)

svg.append("rect")
.attr("width",rectWidth-2)
.attr("height",20)
.attr("x",rectWidth)
.attr("y",200)
.attr("transform",`translate(0,${-20})`)

var dataset=[45,70,12,79,4,127,33,90];

svg.selectAll("rect")
.data(dataset)
.attr("fill","pink")
.enter()
.append("rect")
.attr("width",rectWidth-2)
.attr("height",function (d,i) {
   return d
})
.attr("x",function (d,i) {
   return rectWidth*i
})
.attr("y",200)
.attr("transform",function (d,i) {
  return `translate(0,${-d})`
})
.attr("fill","blue")

结果

d3绘制基本的柱形图的实现代码

前两个矩形的颜色发生了改变。

现在我们改变一下数据集里面数据的个数,看看会发生什么情况?

var dataset=[45];
//,70,12,79,4,127,33,90
svg.selectAll("rect")
.data(dataset)
.attr("fill","pink")
.enter()
.append("rect")
.attr("width",rectWidth-2)
.attr("height",function (d,i) {
   return d
})
.attr("x",function (d,i) {
   return rectWidth*i
})
.attr("y",200)
.attr("transform",function (d,i) {
  return `translate(0,${-d})`
})
.attr("fill","blue")

结果

d3绘制基本的柱形图的实现代码

我们发现如果数据集里数据的个数只有一个,那么只有第一个矩形的颜色会改变,第二个为默认的黑色。

那么如果在数据集不变的情况下,我们想改变第二个矩形的颜色该怎么做呢?

//这里我们使用exit()
svg.selectAll("rect")
.data(dataset)
.attr("fill","pink")
.exit()
.attr("fill","red")

结果

d3绘制基本的柱形图的实现代码

总结

1.当选择集中已经有了矩形,再进行绑定数据时,数据集中已经存在的矩形的数据不会根据数据集进行更新,会保持不变。

2.当选择集与数据集进行绑定是会出现以下情况:

(1)当选择集中的元素个数 小于 数据集中的元素个数,d3 会为多出来的 data 生成占位符,通过 enter() 处理之后就可以为这些占位符 append 元素。简单理解:enter()后的元素需要继续进行可视化的工作。

(2)当选择集中的元素个数 大于 数据集中的元素个数,通过 exit() 处理之后返回多出来那部分数据的元素选择器(这时候接着执行 append 那就是在 rect 上 append rect 了)。简单理解:exit()后返回的是一个选择集,即多出来的那部分元素。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
ExtJs使用IFrame的实现代码
Mar 24 Javascript
jquery中对表单的基本操作代码
Jul 29 Javascript
jquery中this的使用说明
Sep 06 Javascript
JavaScript 垃圾回收机制分析
Oct 10 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 Javascript
JS数组搜索之折半搜索实现方法分析
Mar 27 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
从源码看angular/material2 中 dialog模块的实现方法
Oct 18 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
Javascript模块化机制实现原理详解
Apr 02 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 #Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
Dec 12 #Javascript
js使用swiper实现层叠轮播效果实例代码
Dec 12 #Javascript
如何制作一个Node命令行图像识别工具
Dec 12 #Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 #Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 #Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 #Javascript
You might like
晶体管单管来复再生式收音机
2021/03/02 无线电
PHP中实现进程间通讯
2006/10/09 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
2019/07/03 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
尼克松手表官网:Nixon手表
2019/03/17 全球购物
Linux内核产生并发的原因
2012/07/13 面试题
计算机开发个人求职信范文
2013/09/26 职场文书
银行职员思想汇报
2013/12/31 职场文书
大型活动策划方案
2014/01/12 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle