D3.js V7 简单应用

最新推荐文章于 2024-05-02 00:47:46 发布

前端布布

最新推荐文章于 2024-05-02 00:47:46 发布

阅读量212

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_52080901/article/details/129238750

版权

D3.js

V3.js 画三个小球，本文章适合纯新手入门D3。
掘金的一个D3.js v7学习推荐

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>三个小球D3.js v7</title>
	<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
	<div id="box"></div>
	<script>
		console.log('已经引入',d3)
		var svg = d3.select('#box')
		.append('svg')
		.attr('width','500')
		.attr('height','500')
		.style('border','1px solid #000')
		
		// datas 三原色
		const circles = [
			{id:1,color:'red'},
			{id:2,color:'green'},
			{id:3,color:'blue'}
		]
		// 画圆
		svg.selectAll('circle')
		.data(circles)
		.enter()
		.append('circle')
		.attr('class','circle')
		.attr('id',d=>`circle${d.id}`)
		.attr("cx",d=>50*d.id)
		.attr("cy",d=>50*d.id)
		.attr("r",20)
		.attr("fill",(d)=>d.color)
		
		/**
		 * data、enter、exit
		 * data 将指定数组的数据 data 与已经选中的元素进行绑定并返
		 * 回一个新的选择集和enter 和 exit
		 * enter 返回选择集中有数据但没有对应的DOM元素
		 * exit 选择集中有DOM元素但没有对应的数据
		 * */
		
		
		
		svg.selectAll("circle")
		    .data(circles)
		    .join("circle")
		    .attr("cx", (d) => d.id * 80)
		    .attr("cy", (d) => d.id * 70)
		    .attr("r", 16)
		    .attr("fill", (d)=>d.color);
		
	</script>
</body>
</html>