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。

相关文章

使用Python绘制3D堆叠条形图全解析

使用Python绘制3D堆叠条形图全解析

《使用Python绘制3D堆叠条形图全解析》在数据可视化的工具箱里,3D图表总能带来眼前一亮的效果,本文就来和大家聊聊如何使用Python实现绘制3D堆叠条形图,感兴趣的小伙伴可以了解下... 目录为什么选择 3D 堆叠条形图代码实现：从数据到 3D 世界的搭建核心代码逐行解析细节优化应用场景：3D 堆叠图
阅读更多...
使用Python获取JS加载的数据的多种实现方法

使用Python获取JS加载的数据的多种实现方法

《使用Python获取JS加载的数据的多种实现方法》在当今的互联网时代,网页数据的动态加载已经成为一种常见的技术手段,许多现代网站通过JavaScript（JS）动态加载内容,这使得传统的静态网页爬取... 目录引言一、动态 网页与js加载数据的原理二、python爬取JS加载数据的方法（一）分析网络请求1
阅读更多...
QT6中绘制UI的两种方法详解与示例代码

QT6中绘制UI的两种方法详解与示例代码

《QT6中绘制UI的两种方法详解与示例代码》Qt6提供了两种主要的UI绘制技术：​​QML(QtMeta-ObjectLanguage)​​和​​C++Widgets​​,这两种技术各有优势,适用于不... 目录一、QML 技术详解1.1 QML 简介1.2 QML 的核心概念1.3 QML 示例：简单按钮
阅读更多...
VSCode中配置node.js的实现示例

VSCode中配置node.js的实现示例

《VSCode中配置node.js的实现示例》本文主要介绍了VSCode中配置node.js的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一.node.js下载安装教程二.配置npm三.配置环境变量四.VSCode配置五.心得一.no
阅读更多...
Python使用Matplotlib绘制3D曲面图详解

Python使用Matplotlib绘制3D曲面图详解

《Python使用Matplotlib绘制3D曲面图详解》：本文主要介绍Python使用Matplotlib绘制3D曲面图,在Python中,使用Matplotlib库绘制3D曲面图可以通过mpl... 目录准备工作绘制简单的 3D 曲面图绘制 3D 曲面图添加线框和透明度控制图形视角Matplotlib
阅读更多...
JS+HTML实现在线图片水印添加工具

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的
阅读更多...
Node.js 数据库 CRUD 项目示例详解(完美解决方案)

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》：本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/
阅读更多...
使用Node.js制作图片上传服务的详细教程

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例
阅读更多...
用js控制视频播放进度基本示例代码

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

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

Node.js net模块的使用示例

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

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2