用d3.js画出带米字格的汉字

最新推荐文章于 2023-01-28 17:32:06 发布

与非学堂

最新推荐文章于 2023-01-28 17:32:06 发布

阅读量1k

点赞数 2

分类专栏：学习记录数据可视化文章标签：数据可视化 d3.js

本文链接：https://blog.csdn.net/cg1985cg/article/details/113062426

版权

d3.js 米字格汉字绘制数据驱动批量生产

关键词由CSDN通过智能技术生成

学习记录同时被 2 个专栏收录

24 篇文章

订阅专栏

数据可视化

2 篇文章

订阅专栏

最终要实现的效果：

我们先用d3.js画出一个带米字格的汉字：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>汉字米字格</title>
		<link rel="stylesheet" type="text/css" href="styles.css"/>
		<script type="text/javascript" src="d3.v4.min.js"></script>
	</head>

	<body>
		<script type="text/javascript">
			var body = d3.select("body");


function createChar(){
	var width = 500,
		height = 500,
		color = '#c41b14',
		left = 200, 
		top = 200,
		size = 200; 

	var svg = d3.select("body").append("svg");
	svg.attr('width', width).attr('height', height);

	//内横线
	svg.append('line')
		.attr('x1',left)
		.attr('y1',top + size/2)
		.attr('x2',left + size)
		.attr('y2',top + size/2)
		.attr('stroke',color)
		.attr('stroke-width', 1);

	//内竖线
	svg.append('line')
		.attr('x1',left + size/2)
		.attr('y1',top)
		.attr('x2',left + size/2)
		.attr('y2',top + size)
		.attr('stroke',color)
		.attr('stroke-width', 1);

	//内斜线1
	svg.append('line')
		.attr('x1',left)
		.attr('y1',top)
		.attr('x2',left + size)
		.attr('y2',top + size)
		.attr('stroke',color)
		.attr('stroke-dasharray', '5,5')
		.attr('stroke-width', 1);

	//内斜线2
	svg.append('line')
		.attr('x1',left)
		.attr('y1',top + size)
		.attr('x2',left + size)
		.attr('y2',top)
		.attr('stroke',color)
		.attr('stroke-dasharray', '5,5')
		.attr('stroke-width', 1);

	//外框线
	svg.append('rect')
		.attr('fill','transparent')
		.attr('stroke',color)
		.attr('stroke-width', 5)
		.attr('x',left)
		.attr('y',top)
		.attr('width',size)
		.attr('height',size);

	//汉字
	svg.append('text')
		.attr('x',left)
		.attr('y',top+size-20)
		.style('font-size', '200px')
		.style('font-family', 'Kaiti')
		.attr('fill','black')
		.text('国');

}

createChar();
		</script>
	</body>
</html>

再带上数据实现批量生产：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>汉字米字格</title>
		<link rel="stylesheet" type="text/css" href="styles.css"/>
		<script type="text/javascript" src="d3.v4.min.js"></script>
	</head>

	<body>
		<script type="text/javascript">
			var body = d3.select("body");


var chars = ["水","波","不","兴"];

function createChar(data){
	var width = 1200,
		height = 500,
		color = '#c41b14',
		left = 200, 
		top = 200,
		size = 200; 

	var svg = d3.select("body").append("svg");
	svg.attr('width', width).attr('height', height);

	//内横线
	svg.selectAll('line.inner-horizontal')
		.data(data)
		.enter()
		.append('line')
		.classed('inner-horizontal',true)
		.attr('x1',(d,i)=>{return left + i*size;})
		.attr('y1',top + size/2)
		.attr('x2',(d,i)=>{return left + size + i*size;})
		.attr('y2',top + size/2)
		.attr('stroke',color)
		.attr('stroke-width', 1);

	//内竖线
	svg.selectAll('line.inner-vertical')
		.data(data)
		.enter()
		.append('line')
		.classed('inner-vertical',true)
		.attr('x1',(d,i)=>{return left + size/2 + i*size;})
		.attr('y1',top)
		.attr('x2',(d,i)=>{return left + size/2 + i*size;})
		.attr('y2',top + size)
		.attr('stroke',color)
		.attr('stroke-width', 1);

	//内斜线1
	svg.selectAll('line.inner-dashed1')
		.data(data)
		.enter()
		.append('line')
		.classed('inner-dashed1',true)
		.attr('x1',(d,i)=>{return left+i*size;})
		.attr('y1',top)
		.attr('x2',(d,i)=>{return left + size + i*size;})
		.attr('y2',top + size)
		.attr('stroke',color)
		.attr('stroke-dasharray', '5,5')
		.attr('stroke-width', 1);

	//内斜线2
	svg.selectAll('line.inner-dashed2')
		.data(data)
		.enter()
		.append('line')
		.classed('inner-dashed2',true)
		.attr('x1',(d,i)=>{return left+i*size;})
		.attr('y1',top + size)
		.attr('x2',(d,i)=>{return left + size + i*size;})
		.attr('y2',top)
		.attr('stroke',color)
		.attr('stroke-dasharray', '5,5')
		.attr('stroke-width', 1);

	//外框线
	svg.selectAll('rect.frame')
		.data(data)
		.enter()
		.append('rect')
		.classed('frame',true)
		.attr('fill','transparent')
		.attr('stroke',color)
		.attr('stroke-width', 5)
		.attr('x',(d,i)=>{return left+i*size;})
		.attr('y',top)
		.attr('width',size)
		.attr('height',size);

	//汉字
	svg.selectAll('text.chars')
		.data(data)
		.enter()
		.append('text')
		.classed('chars',true)
		.attr('x',(d,i)=>{return left+i*size;})
		.attr('y',top+size-20)
		.style('font-size', '200px')
		.style('font-family', 'Kaiti')
		.attr('fill','black')
		.text(d=>{return d;});

}

createChar(chars);
		</script>
	</body>
</html>