学习使用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>

标签：const,attr,arc,dms,绘制,d3,append
From： https://www.cnblogs.com/gjw0818/p/16908841.html

学习使用d3.arc()绘制图形

相关文章

赞助商

阅读排行