【前端小技能--D3.js】怎么用D3.js画一个rect（长方形）的图?

最新推荐文章于 2024-04-10 19:26:53 发布

小球学前端

最新推荐文章于 2024-04-10 19:26:53 发布

阅读量1.1k

点赞数 1

分类专栏：前端 D3.js 文章标签： d3.js

本文链接：https://blog.csdn.net/qiuqiu1628480502/article/details/119408993

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

D3.js

1 篇文章 0 订阅

订阅专栏

怎么用D3.js画一个rect（长方形）的图?

创建一个简单的html，引入D3.js，可以本地引入，也可以直接线上引入，建议本地引入。
此处为了演示，使用线上地址<script src="https://d3js.org/d3.v5.min.js"></script>

数据准备

const data = [{name:'zs', value: 20},{name:'zs1', value: 18},
		{name:'zs2', value: 10},{name:'zs3', value: 8},
		{name:'zs4', value: 14},{name:'zs5', value: 8},
		{name:'zs6', value: 12},{name:'zs7', value: 6},
		{name:'zs8', value: 19},{name:'zs9', value: 18}]

直接上代码

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<svg width='1600' height='800' id="mainsvg" class="svgs">
			
		</svg>
	</body>
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script>
		const data = [{name:'zs', value: 20},{name:'zs1', value: 18},
		{name:'zs2', value: 10},{name:'zs3', value: 8},
		{name:'zs4', value: 14},{name:'zs5', value: 8},
		{name:'zs6', value: 12},{name:'zs7', value: 6},
		{name:'zs8', value: 19},{name:'zs9', value: 18}]
		
		const svg = d3.select('#mainsvg')
		
		const width = svg.attr('width')
		const height = svg.attr('height')
		const margin = {top: 60, right: 30, bottom: 80, left: 50}
		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(item => item.name)).range([0, innerHeight])
		               .padding(0.1)
		
		const yAxis = d3.axisLeft(yScale)
		
		const g = svg.append('g').attr('id', 'mainGroup')
		         .attr('transform', `translate(${margin.left}, ${margin.top})`)
		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))
		})
		
		d3.selectAll('.tick text').attr('font-size', '1.8em')
		
		g.append('text').text('MemberMemberMember').attr('font-size', '2.5em')
		.attr('transform', `translate(${innerWidth/2}, -20)`).attr('text-anchor', 'middle')
	</script> 
</html>