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代码
Aug 29 Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
jQuery网页右侧广告跟随滚动代码分享
Apr 20 Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
javascript实现遮罩层动态效果实例
May 14 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
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
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
JS控制文本框textarea输入字数限制的方法
2013/06/17 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
JS将unicode码转中文方法
2017/05/08 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
JS实现分页导航效果
2020/02/19 Javascript
[09:43]DOTA2每周TOP10 精彩击杀集锦vol.5
2014/06/25 DOTA
python任务调度实例分析
2015/05/19 Python
深入学习Python中的装饰器使用
2016/06/20 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
如何通过python实现人脸识别验证
2020/01/17 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
英国家电直销:Appliances Direct
2016/09/22 全球购物
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
银行个人求职自荐信范文
2013/12/16 职场文书
外语专业毕业生自荐信
2014/04/14 职场文书
经销商年会策划方案
2014/05/29 职场文书
中央空调节能方案
2014/06/15 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android