用d3.js画出带米字格的汉字
最终要实现的效果：
我们先用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>