D3------绘制交互式带坐标轴的柱状图

最新推荐文章于 2020-06-29 19:03:24 发布
最新推荐文章于 2020-06-29 19:03:24 发布
阅读量401 收藏 2
点赞数
分类专栏： D3 文章标签： D3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39579290/article/details/90048809
版权

一：引入（主要介绍比例尺）

1.比例尺主要分为两类：定量比例尺和序数比例尺。

定量比例尺主要包括线性比例尺和序数比例尺。它们的主要区别在于定义域是否连续。

2.为什么要使用比例尺？

当遇到页面较大而数据较小时，图形效果较小并且显示不明显，使用比例尺，能在有限空间内最大程度地展示图形效果。

3.为什么要绘制坐标轴？

绘制坐标轴有利于更直观地比较数据之间的差异。

 

二：思路及代码展示

要实现的效果图：

思路：绘制带坐标轴的柱状图，大体上分为两部分：坐标轴和柱状图。

（1）不含比例尺的柱状图和标签，代码如下：

<script>
			//数据
			var dataset=[50,43,120,87,99,167,142];
			//svg
			var width=500;
			var height=500;
			svg=d3.select("body").append("svg")
					.attr("width",width)
					.attr("height",height);
			//边界
			var padding={left:50,right:50,top:50,bottom:50};
			//添加矩形
			var rects=svg.selectAll("rect").data(dataset).enter().append("rect")
						.attr("x",function(d,i){
							return padding.left+i*35;
						})
						.attr("y",function(d,i){
							return heightScale-d;
						})
						.attr("width",30)
						.attr("height",function(d,i){return d;})
						.attr("fill","blue");
			//添加标签
			var texts=svg.selectAll("text").data(dataset).enter()
						.append("text")
						.attr("x",function(d,i){
							return padding.left+i*35;
						})
						.attr("y",function(d,i){
							return heightScale-d;
						})
						.attr("dx",15)
						.attr("dy","1em")
						.attr("font-size",15)
						.attr("text-anchor","middle")
						.attr("fill","white")
						.text(function(d){return d;});
		</script>

结果：

(2)设置X轴和Y轴的比例尺：由效果图显示可知，X轴的值是离散的，选用序数比例尺；Y轴的值是连续的，选用线性比例尺。代码如下：

            var widthScale=300;
			var heightScale=300;
			var xScale=d3.scale.ordinal()
							.domain(d3.range(dataset.length))
							.rangeBands([0,widthScale],0.2);
			var yScale=d3.scale.linear()
							.domain([0,d3.max(dataset)])
							.range([0,heightScale]);

（3）绘制含比例尺的矩形（修改（1）中的部分位置即可），代码如下：

<script>
   var rects=svg.selectAll("rect").data(dataset).enter().append("rect")
						.attr("x",function(d,i){
							return padding.left+xScale(i);
						})
						.attr("y",function(d,i){
							return heightScale-yScale(d);
						})
						.attr("width",xScale.rangeBand())
						.attr("height",function(d,i){return yScale(d);})
						.attr("fill","blue");
			//添加标签
			var texts=svg.selectAll("text").data(dataset).enter()
						.append("text")
						.attr("x",function(d,i){
							return padding.left+xScale(i);
						})
						.attr("y",function(d,i){
							return heightScale-yScale(d);
						})
						.attr("dx",xScale.rangeBand()/2)
						.attr("dy","1em")
						.attr("font-size",15)
						.attr("text-anchor","middle")
						.attr("fill","white")
						.text(function(d){return d;});
		</script>

效果：

（4）绘制坐标轴，代码如下：

			yScale.range([heightScale,0]);
			xAxis=d3.svg.axis().scale(xScale).orient("bottom");
			yAxis=d3.svg.axis().scale(yScale).orient("left");
			//添加坐标轴
			svg.append("g")
				.attr("transform","translate("+padding.left+","+heightScale+")")
				.call(xAxis);
			svg.append("g")
				.attr("transform","translate("+padding.left+","+0+")")
				.call(yAxis);

效果：

上面的坐标轴是不是丑爆了？所以，要对坐标轴进行美化啦。

（5）美化坐标轴，设置并应用样式，代码如下：

        <style>
			.axis path,
			.axis line{
				stroke: black;
				fill:none;
				shape-rendering: crispedges;
			}
			.axis text{
				font-family: sans-serif;
				font-size: 11px;
			}
		</style>
<script>
            svg.append("g")
				.attr("class","axis")
				.attr("transform","translate("+padding.left+","+heightScale+")")
				.call(xAxis);
			svg.append("g")
				.attr("class","axis")
				.attr("transform","translate("+padding.left+","+0+")")
				.call(yAxis);
</script>

效果：

（6）添加交互，当鼠标移到柱形上时，对应的柱形变为红色，移除变为蓝色。

<script>
rects.on("mouseover",function(d,i){
				d3.select(this)
					.attr("fill","red");
			})
			.on("mouseout",function(d,i){
				d3.select(this)
					.attr("fill","blue");
			});
</script>

至此，效果图绘制完毕。

全部代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="d3.js"></script>
		<style>
			.axis path,
			.axis line{
				stroke: black;
				fill:none;
				shape-rendering: crispedges;
			}
			.axis text{
				font-family: sans-serif;
				font-size: 11px;
			}
		</style>
	</head>
	<body>
		<script>
			//数据
			var dataset=[50,43,120,87,99,167,142];
			//svg
			var width=500;
			var height=500;
			svg=d3.select("body").append("svg")
					.attr("width",width)
					.attr("height",height);
			//边界
			var padding={left:50,right:50,top:50,bottom:50};
			//比例尺
			var widthScale=300;
			var heightScale=300;
			var xScale=d3.scale.ordinal()
							.domain(d3.range(dataset.length))
							.rangeBands([0,widthScale],0.2);
			var yScale=d3.scale.linear()
							.domain([0,d3.max(dataset)])
							.range([0,heightScale]);
			
			//添加矩形
			var rects=svg.selectAll("rect").data(dataset).enter().append("rect")
						.attr("x",function(d,i){
							return padding.left+xScale(i);
						})
						.attr("y",function(d,i){
							return heightScale-yScale(d);
						})
						.attr("width",xScale.rangeBand())
						.attr("height",function(d,i){return yScale(d);})
						.attr("fill","blue");
			//交互
			rects.on("mouseover",function(d,i){
				d3.select(this)
					.attr("fill","red");
			})
			.on("mouseout",function(d,i){
				d3.select(this)
					.attr("fill","blue");
			});
			//添加标签
			var texts=svg.selectAll("text").data(dataset).enter()
						.append("text")
						.attr("x",function(d,i){
							return padding.left+xScale(i);
						})
						.attr("y",function(d,i){
							return heightScale-yScale(d);
						})
						.attr("dx",xScale.rangeBand()/2)
						.attr("dy","1em")
						.attr("font-size",15)
						.attr("text-anchor","middle")
						.attr("fill","white")
						.text(function(d){return d;});
			//坐标轴
			yScale.range([heightScale,0]);
			xAxis=d3.svg.axis().scale(xScale).orient("bottom");
			yAxis=d3.svg.axis().scale(yScale).orient("left");
			//添加坐标轴
			svg.append("g")
				.attr("class","axis")
				.attr("transform","translate("+padding.left+","+heightScale+")")
				.call(xAxis);
			svg.append("g")
				.attr("class","axis")
				.attr("transform","translate("+padding.left+","+0+")")
				.call(yAxis);
				
		</script>
	</body>
</html>

 

三：总结

（1）绘制矩形和标签时，一定不要忘了绑定数据。在第一次绘制时，需要使用enter进行添加。

（2）使用比例尺，要根据具体情况选择合适的比例尺，注意各种比例尺之间的区别。

（3）在绘制矩形的时候，要事先想好矩形的位置坐标，便于在加入比例尺时进行位置修改。

 

 

 

 

浅沫～
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
d3-reto-2
02-18
D3.js（Data-Driven Documents）是一个强大的JavaScript库，它允许开发者结合数据操纵DOM（文档对象模型），进而创建交互式、动态的数据可视化。这个项目可能是一个挑战或者任务，旨在展示D3.js的特性和应用。 ...
如何在excel中完成 双纵坐标 柱状图的绘制 （柱子重叠的解决方法）
热门推荐
xing1989的专栏
03-29 7万+
来个例子吧，这个东西，还是图来的生动。（截图来自于 EXCEL 2007版本） Input:   Output: Processing 添加空白列（目的是解决柱子重叠的问题。下图） 没有插入空白列数据，绘制的结果（下图），重叠啦！任你怎么调“重叠”和“间距”比例都无济于事呀 选择数据源。（注意：其中系列3、4是选中空白列添加） 选中“蓝色柱子”，右击->设置
使用d3画一个带有坐标轴的完善的柱形图
xiaozhuangyumaotao的博客
06-29 951
前边搞得d3.js是从d3官网上下载的最新版本的d3.js，是v5.0.0,使用过程中发现文档比较少，因此改为d3.v3.js,官网上有v3.x这个版本的文档不说，而且还是中文的，还是用这个版本吧。而且5.0之后改的api非常多，以前熟悉的很多函数都没有了，或是换了写法，很操蛋，写起来很费劲，所以还是使用3.5.7这个d3.js版本吧。 废话不多说，来看看最终的柱形图的效果： 还是可以吧，下面是实现的源代码，先看html部分，html部分其实就是一个基本的h5结构，啥也没有： &...
如何使用D3.js简单的制作可交互柱状图（完整代码）
mclryan的博客
02-22 5254
前言 了解D3是什么，D3的基本用法 完成一个简易的可交互的柱状图 最近假期写了点东西，趁略有闲余之时，玩了一下D3，之前项目中主要是用各类charts，比如Echarts，诸如此类还有highCharts等，不过那种是用别人写好的库，添加好数据就完成了，就是配置的问题，这种类库最大的问题是定制很难，而D3是自己制作图形，可定制方面比较强，自由度很大，做完之后还是感觉很爽的 现在是数据时代，...
D3生成柱形图添加鼠标事件(一）
xiaozhu2hao的专栏
03-30 2371
直接上代码 8.1.1 鼠标交互 .axis path, .axis line{ fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px;
d3js交互式柱状图
chikuang0023的博客
04-19 533
<html> <head> <metacharset="utf-8"> <title>交互式操作</title> </head> <style> .axispat...
D3-Implements
07-05
它利用数据来操作DOM（文档对象模型），从而构建交互式的数据可视化。本项目"D3-Implements"是针对D3.js的实践示例，展示了如何在实际项目中运用D3.js的功能。 ### 一、D3.js基础知识 D3.js的核心理念是数据绑定...
数据可视化-制作折线图
最新发布
04-08
5. **交互式功能**：对于在线或Web应用，可以创建交互式折线图，如使用D3.js库。用户可以通过鼠标悬停查看具体数据点信息，甚至可以缩放、平移以探索数据的不同部分。 6. **解读与分析**：折线图中的上升趋势可能...
D3-challenge
03-28
这个挑战可能会要求你根据给定的数据集，用D3.js实现一个交互式图表，比如折线图、柱状图、散点图或者地图。通过这个挑战，你不仅能深化对D3.js的理解，还能提升JavaScript编程和数据可视化的技能。记得在实践中不断...
d3-sample:使用 D3.js 示例多折线图和面积图
06-12
D3.js 的灵活性和深度使得它可以用来构建各种复杂的数据可视化，包括折线图、面积图、散点图、柱状图等。 **多折线图与面积图** 1. **多折线图**：多折线图是一种常用的数据可视化方法，可以同时展示多个数据系列...
【 D3.js 入门系列 --- 5.1 】 做一个带坐标轴和标签的图表
十二月咖啡馆工作室
06-25 1万+
前面几节讲解了图标、坐标轴、比例等等，这一节整合这些内容做一个实用的图表。
（笔记）数据可视化实战：使用D3设计交互式图表
ysugarr
10-14 2382
一、准备 章节文件：http://t.cn/zTI9BXG 整个D3项目：github D3官方网站：d3.js.org 中文API：introduce mbostock：bl.ocks.org/mbostock blog.visual.ly/creating-animations-and-transitions-with-d3-js/ D3底层思想；血统的来源：http://vis...
Jquery插件 Echart 带坐标轴带图标的柱状图
anzanli2393的博客
02-19 197
主要过了一遍ECharts的教程，顺带写了个Demo 数据都是假的 var pasttime={ 'PC':'./img/pc.png', 'Pad':'./img/pad.png', 'Mobile':'./img/mobile.png', 'Book...
D3入门总结
何以飘零去_何以少团栾
12-06 3150
基础API选择元素d3.select()选择所有指定元素的第一个d3.selectAll()选择指定元素的全部绑定元素data()绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定dataum()绑定一个数据到选择集上function(d, i){ }当选择集需要使用被绑定的数据时，常需要使用匿名函数。其包含两个参数，其中： d 代表数据，也就是与某元素绑定的数据 i 代表索引，代表数
D3中的交互式操作
The One Who's at the Front
10-20 2639
什么是交互 交互，指的是用户输入了某种指令，程序接受到指令之后必须做出某种响应。对可视化图表来说，交互能使图表更加生动，能表现更多内容。例如，拖动图表中某些图形、鼠标滑到图形上出现提示框、用触屏放大或缩小图形等。 用于用户交互的工具 鼠标、键盘、触屏 如何添加交互 来看简单交互的demo var rect = svg.append("rect"); rect.on("mouseover", f...
D3实现柱状图
chenqk_123的专栏
09-08 5633
D3是一种数据可视化工具，数据的可视化其实就是把数据以图表等直观的方式展示给用户，让用户更直观的感受到数据的走势和变化。这种应用在项目中越来越多的被使用，话说，千句话不如一张图，说的一点都不为过。那么D3作为这种轻巧免费公开的图表制作工具，在应用中被越来越多的使用。D3有很多让人眼前一亮的功能，现在我们所处理的是一些基本的图表，比如柱状图，饼图，折线图等。 话不多说，这篇博客主要是在项目中用到的
使用D3 画出一个带坐标轴的柱形图
qq_41700374的博客
10-22 346
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>TEST-3</title> <!-- <script type="text/javascript" src="js/d3.js"></script> &l...
D3画完整柱状图（带坐标轴、标签）
weixin_30505751的博客
08-02 1470
　　　昨天晚上本来打算花一点时间把之前学的柱状图改一下，用CSV文件来替换自定义数据。这一替换可不得了，一晚上就搭进去了，还好今早找到了问题的所在，原因在于我的数据引用出了问题。 现在就来讲解一下如何画一个柱状图吧： 　　柱状图的画法和折线图其实很类似，只要掌握了比例尺的用法和坐标轴的画法，我们只要在此基础上添加“rect”元素添加矩形就可以了，但这其中也有一些要点，我会在其中标出，...
D3---绘制散点图
qq_39579290的博客
07-10 2121
一：实现效果 如以上视图显示，分别实现散点图和三个按钮的功能。 二：思路 1.添加画布（画图形一般首要的就是添加画布）。 2.添加合适的比例尺。 3.添加圆。 4.添加坐标轴。 5.添加三个按钮并实现相应的功能。 三：代码分析 1.添加画布。 <script> var wwidth=400; var hheight=400; ...
X64系统中大洋D3-Edit2.81.1.10集成版的详细安装教程
"大洋D3-Edit2.81.1.10集成版的X64安装教程" 本文档详细介绍了如何在64位Windows 7旗舰版上正确安装大洋D3-Edit2.81.1.10_X64集成版，这是一个专业级别的视频编辑软件。在开始安装前，确保计算机名不含中文，并关闭...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值