课程链接
https://d3js.org/
Arcs | D3 by Observable
D3 gallery / D3 | Observable
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.selectconst arc = d3.arcconst 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 = 100const eyeYOffset = -70const eyeRadius = 40const eyebrowWidth = 70const eyebrowHeight = 15const eyebrowYOffset = -70const 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>
