04-Intro to D3.js -Let‘s Make a Face
https://juejin.cn/post/7076724865083899935
【注意】
如果想要使用 .transition()，那么它不能链式写在 .append 后面，需要将前面的 .append 封号结尾后再调用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/d3/5.6.0/d3.min.js"
type="application/javascript"></script>
</head>
<body>
<svg width="960" height="500"></svg>
<script>
const select = d3.select
const arc = d3.arc
const svg = select('svg');
// const circle = svg.append('circle')
// const width = parseFloat(svg.attr('width'))
// const height = parseFloat(svg.attr('height'))
const width = +(svg.attr('width'))
const height = +(svg.attr('height'))
const g = svg
.append('g')
.attr('transform', `translate(${width / 2}, ${height / 2})`)
const circle = g
.append('circle')
.attr('r', height / 2)
.attr('fill', 'yellow')
.attr('stroke', 'black');
// 扩展
circle.transition()
.duration(1000)
.attr('fill', 'pink')
.attr('stroke', 'pink')
const eyeSpacing = 100
const eyeYOffset = -70
const eyeRadius = 40
const eyebrowWidth = 70
const eyebrowHeight = 15
const eyebrowYOffset = -70
const eyesG = g
.append('g')
.attr('transform', `translate(0, ${eyeYOffset})`);
// 扩展
eyesG.transition()
.duration(2000)
.attr('transform', `scale(1.5) translate(0, ${eyeYOffset})`)
.transition()
.duration(2000)
.attr('transform', `scale(1.1) translate(0, ${eyeYOffset})`)
const leftEye = eyesG
.append('circle')
.attr('r', eyeRadius)
.attr('cx', - eyeSpacing)
const rightEye = eyesG
.append('circle')
.attr('r', eyeRadius)
.attr('cx', eyeSpacing)
const eyebrowsG = eyesG
.append('g')
.attr('transform', `translate(0, ${eyebrowYOffset})`);
// 如果想要使用transition()，那么它不能链式写在 .append 后面
eyebrowsG
.transition()
.duration(1000)
.attr('transform', `translate(0, ${eyebrowYOffset - 50})`)
.transition()
.duration(1000)
.attr('transform', `translate(0, ${eyebrowYOffset})`)
const leftEyebrow = eyebrowsG
.append('rect')
.attr('width', eyebrowWidth)
.attr('height', eyebrowHeight)
.attr('x', - eyeSpacing - eyebrowWidth / 2)
const rightEyebrow = eyebrowsG
.append('rect')
.attr('width', eyebrowWidth)
.attr('height', eyebrowHeight)
.attr('x', eyeSpacing - eyebrowWidth / 2)
const mouth = g
.append('path')
.attr('d', arc()({
innerRadius: 150,
outerRadius: 170,
startAngle: Math.PI / 2,
endAngle: Math.PI * 3 / 2
}));
mouth.transition().duration(2000)
.attr('d', arc()({
innerRadius: 100,
outerRadius: 120,
startAngle: Math.PI / 2,
endAngle: Math.PI * 3 / 2
}))
</script>
</body>
</html>原文地址：https://blog.csdn.net/gaowxx/article/details/143983734
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！