学习使用d3.arc()绘制图形
d3.arc()是一个弧度生成器，该生成器在被调用时会返回一个字符串，可以赋值给path元素的d属性，用于生成圆弧、圆形和环形。其中0弧度位于12点钟方向，正弧度沿着顺时针方向设置路径。
例如：
const arc = d3.arc()({ innerRadius: 0, outerRadius: 75, startAngle: 0, endAngle: Math.PI * 2 })
打印arc后，返回值为这样一个字符串
M4.592425496802574e-15,-75A75,75,0,1,1,-4.592425496802574e-15,75A75,75,0,1,1,4.592425496802574e-15,-75Z。然后按照上述文字赋值给path元素的d属性就可以绘制一个圆了
const leaves4 = maingroup .append('g') .attr('transform', `translate(283, 25)`) .append('path') .attr('d', arc)
其中，比较常用的弧生成器方法有
（1）arc.innerRadius([radius]) 内径，设置内径值>0的话，会是圆环
（2）arc.outerRadius([radius]) 外径
（3）arc.startAngle([angle]) 开始位置
（4）arc.endAngle([angle]) 截止位置
为了加深d3.arc()的使用，下面给了一个案例。效果如下：
代码如下所示
<!DOCTYPE html> <html lang="en"> <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>greenTree</title> <script src="../../../../d3.min.js"></script> </head> <body> <div class="greenTree" id="greenTree"></div> <script> const dms = { width: 800, height: 800, margin: { top: 50, left: 50, bottom: 50, right: 50 } } dms.innerWidth = dms.width - dms.margin.left - dms.margin.right; dms.innerHeight = dms.height - dms.margin.top - dms.margin.bottom; const svg = d3.select('#greenTree') .append('svg') .attr('width', dms.width) .attr('height', dms.height); const maingroup = svg.append('g') .attr('fill', '#006400') .attr('transform', `translate(${dms.innerWidth / 4}, ${dms.innerHeight / 2})`); // const circles = maingroup.append('circle') // .attr('cx', 100) // .attr('cy', 100) // .attr('r', 75) // .attr('fill', 'green') const leaves1 = maingroup .append('g') .append('path') .attr('d', d3.arc()({ innerRadius: 0, outerRadius: 100, startAngle: Math.PI, endAngle: Math.PI * 3 })) const leaves2 = maingroup .append('g') .attr('transform', `translate(100, -100)`) .append('path') .attr('d', d3.arc()({ innerRadius: 0, outerRadius: 100, startAngle: -Math.PI / 2, endAngle: Math.PI * 2 })) const leaves3 = maingroup .append('g') .attr('transform', `translate(240, -75)`) .append('path') .attr('d', d3.arc()({ innerRadius: 0, outerRadius: 50, startAngle: -Math.PI / 3, endAngle: Math.PI * 2 })) const leaves4 = maingroup .append('g') .attr('transform', `translate(283, 25)`) .append('path') .attr('d', d3.arc()({ innerRadius: 0, outerRadius: 75, startAngle: 0, endAngle: Math.PI * 2 })) const leaves6 = maingroup .append('circle') .attr('cx', 130) .attr('cy', 50) .attr('r', 130) // 树干 const tree = maingroup .append('g') .append('rect') .attr('fill', 'rgb(150,75,0)') .attr('opacity', 0.85) .attr('x', 100) .attr('y', 150) .attr('width', 50) .attr('height', 200) const data = [['富强', '民主', '文明', '和谐'], ['自由', '平等', '公正', '法治'], ['爱国', '敬业', '诚信', '友善']] const gEnter = maingroup .append('g') .selectAll('gClass') .data(data) .join('g') .attr('transform', (d, i) =>`translate(0, ${-85 + 80 * i})`) .attr('class', 'gClass') .attr('fill', (d, i) => i === 0 ? 'yellow' : i === 1 ? '#000000' : '#ffffff'); gEnter.selectAll('circle') .data(d=>d) .join('circle') .attr('cx', (d, i) => 12 + 80 * i) .attr('r', 40) .attr('fill', 'green') gEnter.selectAll('text') .data(d=>d) .join('text') .attr('x', (d, i) => 12 + 80 * i) .attr('y', 5) .text(d=>d) .attr('text-anchor', 'middle') .attr('font-size', '20') </script> </body> </html>
