使用D3.js实现柱形图的制作

最新推荐文章于 2022-11-30 17:59:50 发布
最新推荐文章于 2022-11-30 17:59:50 发布
阅读量2.4k 收藏 1
点赞数 1
分类专栏： 数据可视化D3.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011699990/article/details/52783886
版权

通过矩形的长短表示数据

1.静态定义一些数据  然后显示数据柱形图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-CN" xml:lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml">



<body>

<!-- <p>Cat</p>
<p>Dog</p> -->


<script src="d3/d3.js" charset="utf-8"></script>
<script>

var dataset=[50,43,120,87,99,167,142];
var width=400;
var height=400;
var svg=d3.select("body")
		.append("svg")
		.attr("width",width)
		.attr("height",height);

var padding={top:20, right:20, bottom:20, left:20};
var rectStep=35;
var rectWidth=30;
var rect=svg.selectAll("rect")
			.data(dataset)
			.enter()
			.append("rect")
			.attr("fill","steelblue")
			.attr("x",function(d,i){
				return padding.left+i*rectStep;
			})
			.attr("y",function(d){
				return height-padding.bottom-d;
			})
			.attr("width",rectWidth)
			.attr("height",function(d){
				return d;
			});

var text=svg.selectAll("text")
			.data(dataset)
			.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)
			.attr("dy","1em")
			.text(function(d){
				return d;
			});

// var p=d3.select("body").selectAll("p");
// p.datum(7);
// console.log(p);

// var p=d3.select("body")
// 	.selectAll("p")
// 	.text("Hello World")
// p.style("color","red");
// p.style("font-size","72px");


// var width=400;
// var height=400;
// var svg=d3.select("body")
// 			.append("svg")z`
// 			.attr("width",width)
// 			.attr("height",height);
// svg.append("circle")
// 	.attr("cx","50px")
// 	.attr("cy","50px")
// 	.attr("r","50px")
// 	.attr("fill","red")

// console.log(error);

</script>

</body>
</html>


效果图


2.在屏幕上多设置两个按钮 排序和添加数据

排序采用递增  随机产生数据添加到图中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-CN" xml:lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<body>

<!-- <p>Cat</p>
<p>Dog</p> -->



<script src="d3/d3.js" charset="utf-8"></script>
<script>

var dataset=[50,43,120,87,99,167,142];
var width=800;
var height=400;
var svg=d3.select("body")
		.append("svg")
		.attr("width",width)
		.attr("height",height);

var padding={top:20, right:20, bottom:20, left:20};
var rectStep=35;
var rectWidth=30;
var rect=svg.selectAll("rect")
			.data(dataset)
			.enter()
			.append("rect")
			.attr("fill","steelblue")
			.attr("x",function(d,i){
				return padding.left+i*rectStep;
			})
			.attr("y",function(d){
				return height-padding.bottom-d;
			})
			.attr("width",rectWidth)
			.attr("height",function(d){
				return d;
			});

var text=svg.selectAll("text")
			.data(dataset)
			.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)
			.attr("dy","1em")
			.text(function(d){
				return d;
			});

function draw(){
	var updateRect=svg.selectAll("rect")
						.data(dataset);
	var enterRect=updateRect.enter();//获取矩形的enter部分
	var exitRect=updateRect.exit();

	updateRect.attr("fill","steelblue")
			.attr("x",function(d,i){
				return padding.left+i*rectStep;
			})
			.attr("y",function(d){
				return height-padding.bottom-d;
			})
			.attr("width",rectWidth)
			.attr("height",function(d){
				return d;
			});

	enterRect.append("rect")
			.attr("x",function(d,i){
				return padding.left+i*rectStep;
			})
			.attr("y",function(d){
				return height-padding.bottom-d;
			})
			.attr("width",rectWidth)
			.attr("height",function(d){
				return d;
			});

	exitRect.remove();


	var updateText=svg.selectAll("text")
						.data(dataset);
	var enterText=updateText.enter();
	var exitText=updateText.exit();

	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)
				.attr("dy","1em")
				.text(function(d){
					return d;
				});//注意添加的性质

	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)
				.attr("dy","1em")
				.text(function(d){
					return d;
				});

	exitText.remove();
	
}


function mysort(){
	console.log(dataset);
	dataset.sort(d3.ascending);
	console.log(dataset.sort(d3.ascending));
	// dataset.sort(function(a,b){
	// 	return a-b;
	// });
	// console.log(dataset.sort(function(a,b){
	// 	return a-b;
	// }));
	draw();
}

function myadd(){
	dataset.push(Math.floor(Math.random()*100));
	console.log(dataset);
	draw();
}



// var p=d3.select("body").selectAll("p");
// p.datum(7);
// console.log(p);

// var p=d3.select("body")
// 	.selectAll("p")
// 	.text("Hello World")
// p.style("color","red");
// p.style("font-size","72px");


// var width=400;
// var height=400;
// var svg=d3.select("body")
// 			.append("svg")z`
// 			.attr("width",width)
// 			.attr("height",height);
// svg.append("circle")
// 	.attr("cx","50px")
// 	.attr("cy","50px")
// 	.attr("r","50px")
// 	.attr("fill","red")

// console.log(error);

</script>

<button type="button" οnclick="mysort()">排序</button>
<button type="button" οnclick="myadd()">增加数据</button>

</body>
</html>

效果图







   

理想主义文艺青年
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用d3.js实现柱状图
06-14
使用d3.js实现柱状图使用d3.js实现柱状图使用d3.js实现柱状图使用d3.js实现柱状图
D3.js-柱形图
李刚的学习专栏
10-08 7549
柱形图，是使用柱形的长短来表示数据变化的图表，也是最简单的图表之一。一般情况下，柱形图包括：矩形、坐标轴和文字。 一、矩形和文字定义一个数组，每个数据项表示矩形的长短：var dataset = [50, 43, 120, 87, 99, 167, 142]; // 数据集定义一个SVG，表示绘制区域：var width = 400; // svg可视区域宽度 var height = 40
D3.js 柱形图
蜗牛速度额的博客
08-27 813
&amp;amp;amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;html lang=&amp;amp;amp;amp;amp;amp;amp;quot;en&amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;a
D3.js 完整的柱形图
youngkl博客
10-13 794
之前已经写过了一个柱形图 但是那个并没有坐标轴 在这里来一个带坐标轴的柱形图 柱形图中 y轴可根据数据的值进行缩放 按照一定的比例       完整的柱形图 .axis path, .axis line{ fill:none; stroke:black; shape-rendering:crispEdges; } .axis text{ f
d3.js柱状图
10-26
d3.js柱状图gif图片
使用D3.js制作图表详解
10-19
D3.js，全称Data-Driven Documents，是一个强大的JavaScript库，专门用于数据可视化。它以其灵活性、可定制性和丰富的图表类型而备受推崇。D3.js的核心特性在于它能够结合数据驱动的DOM操作，使得开发者可以精确地...
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
10-17
主要介绍了D3.js(v3)+react 制作 一个带坐标与比例尺的柱形图 (V3版本) ，本文通过实例代码文字相结合的形式给大家介绍的非常详细,需要的朋友可以参考下
技巧83细分柱形图共4页.pdf.zip
12-01
8. **编程语言实现**：Python的Matplotlib库，R语言的ggplot2，JavaScript的D3.js等编程语言和库也提供了创建细分柱形图的功能，适合更复杂的数据分析和自定义需求。 9. **数据故事讲述**：细分柱形图可以作为数据...
JS 柱形图
08-14
在JS中实现柱形图，我们可以使用多种库，例如D3.js、Chart.js、ECharts、Highcharts等。这些库提供了丰富的功能和自定义选项，帮助开发者轻松地生成美观且交互性强的图表。 1. **D3.js**： D3全称为Data-Driven ...
运用D3.js实现柱状图
m0_46390103的博客
11-30 418
D3.js实现柱状图
D3.JS 基于javascript的图表展示库<六>-基本柱状图2
04-07
D3.JS 基于javascript的图表展示库<六>-基本柱状图2 博客地址 http://blog.csdn.net/a6383277/article/details/8768412
d3js绘制多系统柱形图
01-29
d3js 多系统柱形图
D3.JS 基于javascript的图表展示库<五>-基本柱状图1
04-05
D3.JS 基于javascript的图表展示库<五>-基本柱状图1 博客地址http://blog.csdn.net/a6383277/article/details/8762638
柱状图jquery特效代码 js+css实现的柱形图
01-14
柱状图jquery特效代码 js+css实现的柱形图，js+css写的一个页面柱状图组件，“柱子”是用div显示的，附带有使用示例，感兴趣的朋友可以看一下，欢迎给出指导意见
D3.js 绘制柱状图
You_Ta的博客
10-13 3685
D3 V4 版本绘制柱状图总结
利用d3.js绘制柱状图demo
个人新博客: https://cbbfcd.github.io/
07-05 3766
这个不太难，就随手写了个demo. 完整柱状图demo //1.画布svg var width=400; var height=400;//画布大小 var svg=d3.select("body").append("svg").attr("width",width).attr("height",height);//添加画布 //画布周边留白 var pa
图形化开发（四）04-D3.js之实践——柱状图详细版demo
weixin_44867717的博客
09-22 265
图形化开发（四）04-D3.js之实践——柱状图详细版demo 效果 代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com
D3基础 | 条形图
小小酥梨的博客
04-27 1779
文章目录看完的收获数据可视化介绍干什么有什么用何为美丽经典案例元素周期表伦敦地铁图网页介绍D3介绍复联3战力分布条形图小结彩蛋 看完的收获   想必去年的《复仇者联盟3：无限战争》是伤害了无数影迷的心。在无数影迷痛心疾首各个英雄的离开的同时，有的人感叹灭霸的励志，有的人对某个英雄的坑队友行为异常愤怒，于是才有了以下这张图。   十七世纪的大科学家伽利略曾经说过：“我们要测量那些可以测量的东西，至于...
采用收集处理之后的数据，使用D3.js绘制柱形图，增加图例，增加交互性功能
最新发布
05-12
4. 创建柱形图：使用 D3.js 创建柱形图，例如： ```javascript const bars = svg.selectAll("rect") .data(data) .enter() .append("rect") .attr("x", (d, i) => i * barWidth) .attr("y", d => height - d...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值