D3.js学习笔记-绘制柱状图

最新推荐文章于 2023-04-19 22:38:02 发布

写代码的资资

最新推荐文章于 2023-04-19 22:38:02 发布

阅读量300

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_43118073/article/details/115795488

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

学习视频：https://www.bilibili.com/video/BV1HK411L72d?p=4&spm_id_from=pageDriver
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/d3.min.js"></script>
		<title>BarChart!</title>
	</head>
	<body>
		<svg width="1600" height="800" id="mainsvg" class="svgs"></svg>

		<script>
			        const data = [{name: 'Shao-Kui', value:6},
        {name:'Wen-Yang', value:6}, {name:'Cai Yun', value:16}, {name:'Liang Yuan', value: 10}, 
        {name:'Yuan-Chen', value:6}, {name:'Rui-Long', value:10}, {name:'Dong Xin', value:12}, 
        {name:'He Yu', value:20}, {name:'Xiang-Li', value:12}, {name:'Godness', value:20}, 
        {name:'Wei-Yu', value:15}, {name:'Chen Zheng', value:14}, 
        {name:'Yu Peng', value:15}, {name:'Li Jian', value:18}]; 

			
		const svg = d3.select('#mainsvg');
		const width = +svg.attr('width'); //+""是转换成数字
		const height = +svg.attr('height');
		const margin = {top:60,right:30,bottom:60,left:150};
		const innerWidth = width - margin.left - margin.right;
		const innerHeight = height - margin.top - margin.bottom;


		const xScale = d3.scaleLinear()
		.domain([0,d3.max(data,d => d.value)])
		.range([0,innerWidth]); //横轴的比例尺
		
		//
		//map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
		//map() 方法按照原始数组元素顺序依次处理元素。
		//纵轴的比例尺
		const yScale = d3.scaleBand()
		.domain(data.map(d => d.name))
		.range([0,innerHeight])
		.padding(0.1); //每个条带需要预留多少位置作为条带

		//创建一个组
		const g = svg.append('g').attr('id','maingroup')
		.attr('transform',`translate(${margin.left},${margin.top})`); //用了模板字符串

		const yAxis = d3.axisLeft(yScale);
		//.tickSize(-innerWidth);
		g.append('g').call(yAxis);

		const xAxis = d3.axisBottom(xScale);
		g.append('g').call(xAxis).attr('transform',`translate(0,${innerHeight})`);

		data.forEach(d=>{
			g.append('rect')
			.attr('width',xScale(d.value))
			.attr('height',yScale.bandwidth())
			.attr('fill','green')
			.attr('y',yScale(d.name))
			.attr('opacity','0.8')
		});
		//文字的大小以em为单位
		d3.selectAll('.tick text').attr('font-size','2em'); //选择每个坐标轴的每一个刻度

		g.append('text').text('Members of CSCG')
		.attr('font-size','3em')
		.attr('transform',`translate(${innerWidth/2},${0})`)
		.attr('text-anchor','middle');

		</script>
	</body>
</html>

写代码的资资

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
D3.js学习笔记-绘制柱状图

学习视频：https://www.bilibili.com/video/BV1HK411L72d?p=4&spm_id_from=pageDriver<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="js/d3.min.js"></script> <title>BarChart!</title> <
复制链接

扫一扫

专栏目录