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 相关文章推荐
Javascript 圆角div的实现代码
Oct 15 Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
微信小程序 新建登录页并实现tabBar隐藏
Jun 13 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 Javascript
React 组件渲染和更新的实现代码示例
Feb 21 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
微信小程序 简易计算器实现代码实例
Sep 02 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 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
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
JavaScript每天必学之基础知识
2016/09/17 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
Python计算三角函数之asin()方法的使用
2015/05/15 Python
python文件选择对话框的操作方法
2019/06/27 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
基于Python实现天天酷跑功能
2021/01/06 Python
办公室文秘自我鉴定
2013/09/21 职场文书
农行实习自我鉴定
2013/09/22 职场文书
小学教师的个人自我鉴定
2013/10/26 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
《哪吒闹海》教学反思
2014/02/28 职场文书
中秋节活动总结
2014/08/29 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
死亡证明书样本说明
2014/10/18 职场文书
运动会表扬稿范文
2015/05/05 职场文书
综治目标管理责任书
2015/05/11 职场文书
化验室安全管理制度
2015/08/06 职场文书
创业计划书介绍
2019/04/24 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
Java实现房屋出租系统详解
2021/10/05 Java/Android
详解JS数组方法
2021/11/20 Javascript
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers