D3.js绘制柱形图

2023-12-30 04:08
文章标签 js 绘制 柱形图 d3

本文主要是介绍D3.js绘制柱形图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

注意：此次绘制的柱形图不涉及坐标。

步骤：

一.添加矩形。

  <script type="text/javascript">var datest = [30,78,90,210,105,98,150,177];     //绘制柱形图所用的数据var width = 400;        //svg绘图区域的宽度var height = 400;       //svg绘图区域的高度var svg = d3.select('body')       //选择<tbody>.append('svg')					//在<tbody>中添加<svg>.attr('width', width)				//设置<svg>的宽度属性.attr('height', height)				//设置<svg>的高度属性var padding = {top: 20, right: 20, bottom: 20, left: 20};     //定义上下左右的内边距//矩形所占的宽度（包括空白）var rectStep = 35;//矩形所占的宽度（不包括空白）var rectWidth = 30;//绘制矩形var rect = svg.selectAll('rect')			.data(datest)							//绑定数据.enter()									.append('rect')						//添加rect元素，使他的数量和数组长度一致.attr('fill', 'steelblue')      //设置颜色为steelblue.attr('x', function(d,i) {return padding.left + i * rectStep;					//设置矩形的x坐标}).attr('y', function(d) {return height - padding.bottom - d;        //设置矩形的y坐标}).attr('width', rectWidth)                //设置矩形的宽度.attr('height', function(d) {return d;														//设置矩形的高度});</script>

效果图：

二.添加文字。

		//添加文字部分var text = svg.selectAll('text').data(datest).enter().append('text').attr('fill', 'white').attr('font-size', '14px').attr('text-anchor', 'middle').attr('x', function(d,i) {return padding.left + i * rectStep;}).attr('y', function(d) {return height - padding.bottom - d;}).attr('dx', rectWidth / 2)         //dx是相对于x平移的大小.attr('dy', '1em')								//dy是相对于y平移的大小.text(function(d) {return d;})

效果图：

三.更新数据。

	  //更新数据function draw() {//获取矩形的update部分var updateRect = svg.selectAll('rect').data(datest);//获取矩形的enter部分var enterRect = updateRect.enter();//获取矩形的exit部分var exitRect = updateRect.exit();//1.矩形的update部分的处理方法updateRect.attr('fill', 'steelblue')      //设置颜色为steelblue.attr('x', function(d,i) {       //设置矩形的x坐标return padding.left + i * rectStep;}).attr('y', function(d) {         //设置矩形的y坐标return height - padding.bottom - d;}).attr('width', rectWidth)        //设置矩形的宽度.attr('height', function(d) {			//设置矩形的高度return d;});//2.矩形的enter部分处理办法enterRect.append('rect').attr('fill', 'steelblue')        //设置矩形的颜色.attr('x', function(d,i) {        //设置矩形的x坐标return padding.left + i * rectStep;}).attr('y', function(d) {						//设置巨型的y坐标return height - padding.bottom - d;}).attr('width', rectWidth)        //设置矩形的宽度.attr('height', function(d) {			//设置矩形的高度return d;});//3.矩形的exit处理方法exitRect.remove();//获取文字的update部分var updateText = svg.selectAll('text').data(datest);//获取文字的enter部分var enterText = updateText.enter();//获取文字的exit部分var exitText = updateText.exit();//1.文字的update部分的处理方法updateText.attr('fill', 'white').attr('font-size', '14px').attr('text-anchor', 'middle').attr('x', function(d,i) {return padding.left + i * rectStep;}).attr('y', function(d) {return height - padding.bottom - d;}).attr('dx', rectWidth / 2)         //dx是相对于x平移的大小.attr('dy', '1em')								//dy是相对于y平移的大小.text(function(d) {return d;});//2.文字的enter部分的处理方法enterText.append('text').attr('fill', 'white').attr('font-size', '14px').attr('text-anchor', 'middle').attr('x', function(d,i) {return padding.left + i * rectStep;}).attr('y', function(d) {return height - padding.bottom - d;}).attr('dx', rectWidth / 2)         //dx是相对于x平移的大小.attr('dy', '1em')								//dy是相对于y平移的大小.text(function(d) {return d;});//3.文字的exit处理办法exitText.remove();}//排序函数function mySort() {datest.sort(d3.ascending);draw();}//增加一个项函数function myAdd() {datest.push(Math.floor(Math.random() * 100));draw();}</script><div class="box"><button type="button" onclick="mySort()">排序</button><button type="button" onclick="myAdd()">增加数据</button></div>
</body>

 

效果图：

 

 

全部代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.box {width: 300px;display: flex;flex-direction: row;justify-content: space-around;margin-bottom: 50px;}</style><script src="https://cdn.bootcss.com/d3/3.2.1/d3.js"></script>
</head>
<body><script type="text/javascript">var datest = [30,78,90,210,105,98,150,177];     //绘制柱形图所用的数据var width = 500;        //svg绘图区域的宽度var height = 500;       //svg绘图区域的高度var svg = d3.select('body')       //选择<tbody>.append('svg')					//在<tbody>中添加<svg>.attr('width', width)				//设置<svg>的宽度属性.attr('height', height)				//设置<svg>的高度属性var padding = {top: 20, right: 20, bottom: 20, left: 20};     //定义上下左右的内边距//矩形所占的宽度（包括空白）var rectStep = 35;//矩形所占的宽度（不包括空白）var rectWidth = 30;//绘制矩形var rect = svg.selectAll('rect')			.data(datest)							//绑定数据.enter()									.append('rect')						//添加rect元素，使他的数量和数组长度一致.attr('fill', 'steelblue')      //设置颜色为steelblue.attr('x', function(d,i) {return padding.left + i * rectStep;					//设置矩形的x坐标}).attr('y', function(d) {return height - padding.bottom - d;        //设置矩形的y坐标}).attr('width', rectWidth)                //设置矩形的宽度.attr('height', function(d) {return d;														//设置矩形的高度});//添加文字部分var text = svg.selectAll('text').data(datest).enter().append('text').attr('fill', 'white').attr('font-size', '14px').attr('text-anchor', 'middle').attr('x', function(d,i) {return padding.left + i * rectStep;}).attr('y', function(d) {return height - padding.bottom - d;}).attr('dx', rectWidth / 2)         //dx是相对于x平移的大小.attr('dy', '1em')								//dy是相对于y平移的大小.text(function(d) {return d;});//更新数据function draw() {//获取矩形的update部分var updateRect = svg.selectAll('rect').data(datest);//获取矩形的enter部分var enterRect = updateRect.enter();//获取矩形的exit部分var exitRect = updateRect.exit();//1.矩形的update部分的处理方法updateRect.attr('fill', 'steelblue')      //设置颜色为steelblue.attr('x', function(d,i) {       //设置矩形的x坐标return padding.left + i * rectStep;}).attr('y', function(d) {         //设置矩形的y坐标return height - padding.bottom - d;}).attr('width', rectWidth)        //设置矩形的宽度.attr('height', function(d) {			//设置矩形的高度return d;});//2.矩形的enter部分处理办法enterRect.append('rect').attr('fill', 'steelblue')        //设置矩形的颜色.attr('x', function(d,i) {        //设置矩形的x坐标return padding.left + i * rectStep;}).attr('y', function(d) {						//设置巨型的y坐标return height - padding.bottom - d;}).attr('width', rectWidth)        //设置矩形的宽度.attr('height', function(d) {			//设置矩形的高度return d;});//3.矩形的exit处理方法exitRect.remove();//获取文字的update部分var updateText = svg.selectAll('text').data(datest);//获取文字的enter部分var enterText = updateText.enter();//获取文字的exit部分var exitText = updateText.exit();//1.文字的update部分的处理方法updateText.attr('fill', 'white').attr('font-size', '14px').attr('text-anchor', 'middle').attr('x', function(d,i) {return padding.left + i * rectStep;}).attr('y', function(d) {return height - padding.bottom - d;}).attr('dx', rectWidth / 2)         //dx是相对于x平移的大小.attr('dy', '1em')								//dy是相对于y平移的大小.text(function(d) {return d;});//2.文字的enter部分的处理方法enterText.append('text').attr('fill', 'white').attr('font-size', '14px').attr('text-anchor', 'middle').attr('x', function(d,i) {return padding.left + i * rectStep;}).attr('y', function(d) {return height - padding.bottom - d;}).attr('dx', rectWidth / 2)         //dx是相对于x平移的大小.attr('dy', '1em')								//dy是相对于y平移的大小.text(function(d) {return d;});//3.文字的exit处理办法exitText.remove();}//排序函数function mySort() {datest.sort(d3.ascending);draw();}//增加一个项函数function myAdd() {datest.push(Math.floor(Math.random() * 100));draw();}</script><div class="box"><button type="button" onclick="mySort()">排序</button><button type="button" onclick="myAdd()">增加数据</button></div>
</body>
</html

 

 

 

 

 

 

 

 

 

 

 

 

这篇关于D3.js绘制柱形图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/551656。

相关文章

用js控制视频播放进度基本示例代码

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意：总结前言在javascript中控制视频播放
阅读更多...
Node.js net模块的使用示例

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服
阅读更多...
mac安装nvm(node.js)多版本管理实践步骤

mac安装nvm(node.js)多版本管理实践步骤

《mac安装nvm(node.js)多版本管理实践步骤》：本文主要介绍mac安装nvm(node.js)多版本管理的相关资料,NVM是一个用于管理多个Node.js版本的命令行工具,它允许开发者在... 目录NVM功能简介MAC安装实践一、下载nvm二、安装nvm三、安装node.js总结NVM功能简介N
阅读更多...
前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...
JS 实现复制到剪贴板的几种方式小结

JS 实现复制到剪贴板的几种方式小结

《JS实现复制到剪贴板的几种方式小结》本文主要介绍了JS实现复制到剪贴板的几种方式小结,包括ClipboardAPI和document.execCommand这两种方法,具有一定的参考价值,感兴趣的... 目录一、Clipboard API相关属性方法二、document.execCommand优点：缺点：
阅读更多...
使用Python绘制蛇年春节祝福艺术图

使用Python绘制蛇年春节祝福艺术图

《使用Python绘制蛇年春节祝福艺术图》：本文主要介绍如何使用Python的Matplotlib库绘制一幅富有创意的“蛇年有福”艺术图,这幅图结合了数字,蛇形,花朵等装饰,需要的可以参考下... 目录1. 绘图的基本概念2. 准备工作3. 实现代码解析3.1 设置绘图画布3.2 绘制数字“2025”3.3
阅读更多...
使用Python绘制可爱的招财猫

使用Python绘制可爱的招财猫

《使用Python绘制可爱的招财猫》招财猫,也被称为“幸运猫”,是一种象征财富和好运的吉祥物,经常出现在亚洲文化的商店、餐厅和家庭中,今天,我将带你用Python和matplotlib库从零开始绘制一... 目录1. 为什么选择用 python 绘制？2. 绘图的基本概念3. 实现代码解析3.1 设置绘图画
阅读更多...
Node.js 中 http 模块的深度剖析与实战应用小结

Node.js 中 http 模块的深度剖析与实战应用小结

《Node.js中http模块的深度剖析与实战应用小结》本文详细介绍了Node.js中的http模块,从创建HTTP服务器、处理请求与响应,到获取请求参数,每个环节都通过代码示例进行解析,旨在帮... 目录Node.js 中 http 模块的深度剖析与实战应用一、引言二、创建 HTTP 服务器：基石搭建（一
阅读更多...
Python绘制土地利用和土地覆盖类型图示例详解

Python绘制土地利用和土地覆盖类型图示例详解

《Python绘制土地利用和土地覆盖类型图示例详解》本文介绍了如何使用Python绘制土地利用和土地覆盖类型图,并提供了详细的代码示例,通过安装所需的库,准备地理数据,使用geopandas和matp... 目录一、所需库的安装二、数据准备三、绘制土地利用和土地覆盖类型图四、代码解释五、其他可视化形式1.
阅读更多...
如何用Python绘制简易动态圣诞树

如何用Python绘制简易动态圣诞树

《如何用Python绘制简易动态圣诞树》这篇文章主要给大家介绍了关于如何用Python绘制简易动态圣诞树,文中讲解了如何通过编写代码来实现特定的效果,包括代码的编写技巧和效果的展示,需要的朋友可以参考... 目录代码：效果：总结 代码：import randomimport timefrom math
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2