【无标题】D3的学习日记

StarBurst_Stream

已于 2022-06-26 21:45:46 修改

阅读量85

点赞数

文章标签：学习 javascript 前端

于 2022-06-26 21:41:54 首次发布

本文链接：https://blog.csdn.net/M87inhabitant/article/details/125474618

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、运行截图
二、心得
- 暂时还没什么心得
总结

前言

没什么前言，代码简单copy一下

一、运行截图

在这里插入图片描述

下面展示一些 内联代码片。

// An highlighted block
<!DOCTYPE html>
<html>
<head>
	<title>firstDemo</title>
	<script src="C:\Users\catastrofic\Desktop\package\dist\d3.js"></script>
</head>
<body>
	<svg width="1500" height="800" id="mainsvg" class="svgs"></svg>
	<script>
		const data = [
		{name:"AAA",value:56},
		{name:"BBB",value:20},
		{name:"CCC",value:43},
		{name:"DDD",value:15},
		{name:"EEE",value:67},
		{name:"FFF",value:45},
		{name:"GGG",value:31},
		{name:"HHH",value:24},
		{name:"I I I",value:78}
		]

		const svg = d3.select('#mainsvg');

		const width = +svg.attr('width');
		const height = +svg.attr('height');
		const margin = {top:180 ,left:100, right:60, bottom:100};

		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]);

		const yScale = d3.scaleBand()
		.domain(data.map( d => d.name ))
		.range([0,innerHeight])
		.padding(0.1);
		//padding:间隔

		const yAxis = d3.axisLeft(yScale);
		const xAxis = d3.axisBottom(xScale);

		const g = svg.append('g')
		.attr('id', 'maingroup')
		.attr('transform', `translate(${margin.left} , ${margin.top})`);//``这个反引号是ES6中新增的模板字符串，不是单引号！
		
		/*
		//最简单的坐标轴设置方式：
		g.append('g').call(yAxis);
		g.append('g').call(xAxis).attr('transform', `translate(0,${innerHeight})`);
		*/

		// 一般的坐标轴设置	
		const yAxisGroup = g.append('g').call(yAxis)
        .attr('id', 'yaxis')
        .append('text')
        .text('Name')
        .attr('font-size', '3em')
        .attr('transform', 'rotate(-90)') // y-axis label needs an additional transform; 
        .attr('x', -innerHeight / 2)
        .attr('y', -50)
        .attr('fill', 'blue')
        const xAxisGroup = g.append('g').call(xAxis)
        .attr('id', 'xaxis')
        .attr('transform', `translate(${0}, ${innerHeight})`)
        .append('text')
        .text('Value')
        .attr('font-size', '3em')
        .attr('x', innerWidth / 2)
        .attr('y', 50)
        .attr('fill', 'blue');


		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 );
		});
		/**
			width： 矩形的宽
			height： 矩形的高
			fill	：填充颜色
			y 		：矩形位置，如果不设置默认为0；这相当于maingroup中的y值
			x值不需要设置，默认为0
		*/


		//设置坐标轴文字大小
		d3.selectAll('.tick text').attr('font-size', '2em');

		//添加标题
		g.append('text').text('This is my first D3.js demo').attr('font-size','3em')
		.attr('transform', `translate(${innerWidth/2},-10)`)
		.attr('text-anchor', 'middle');

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