D3.js学习03_画布使用

最新推荐文章于 2024-05-30 21:07:35 发布

半盒果酱

最新推荐文章于 2024-05-30 21:07:35 发布

阅读量918

点赞数

CC 4.0 BY-SA版权

分类专栏： D3.js

本文链接：https://blog.youkuaiyun.com/flora_zhl/article/details/51679665

D3.js 专栏收录该内容

5 篇文章

订阅专栏

本文介绍D3.js中如何使用SVG和Canvas进行图表绘制，通过匿名函数function(d,i)处理数据和索引，展示横向图与竖向图的绘制步骤，帮助初学者理解D3.js的基础绘图过程。" 133574207,19673537,解决Windows上VCRUNTIME.dll缺失错误的步骤,"['windows', '编程', '软件故障排除', '系统维护', 'C++']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习参考：【 D3.js 入门系列 — 3 】做一个简单的图表！

【SVG】可缩放矢量图形（Scalable Vector Graphics）

【Canvas】用于绘制位图

【匿名函数function(d,i)】“d”表示绑定的数据，“i”表示索引

【横向图步骤】

1.添加画布

var width=400;
var height=500;
		
var svg=d3.select("body")//选择body
	.append("svg")//添加svg节点
	.attr("width",width)//设置宽
	.attr("height",height);//设置高

2.画矩形

var weightset=[30,50,80,90,130,200];//数据
		var baseheight=20;//矩形高
		var paddingleft=30;//矩形起始横坐标
		var margin=5;//矩形间距
		
		svg.selectAll("rect")//选择矩形
			.data(weightset)
			.enter()
			.append("rect")
			.attr("width",function(d){
								   return d;})
			.attr("height",baseheight)
			.attr("x",paddingleft)
			.attr("y",function(d,i){
							   return i*(baseheight+margin);
							   })
			.attr("fill","green");

【竖向图】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<title>简单条形图</title>
</head>
<body>
<script type="text/javascript">

		var dataset=[60,30,70,120,90];
    	var width=400;//画布宽
		var height=200;//画布高
		
		var baseWidth=25;//矩形宽
		var margin=5//矩形间隔
		var paddingTop=10;//上间距
		
		var svg=d3.select("body")
					.append("svg")//添加画布节点
					.attr("width",width)
					.attr("height",height);
		svg.selectAll("rect")
			.data(dataset)
			.enter()
			.append("rect")
			.attr("width",baseWidth)
			.attr("height",function(d){return d;})
			.attr("x",function(d,i){
							   return i*(baseWidth+margin);
							   })
			.attr("y",function(d){
							   return height-d;
							   })
			.attr("fill","green");
		
    </script>
</body>
</html>