D3.js（三）：线段生成器、区域生成器、弧生成器、符号生成器、弦生成器、对角线生成器、饼图、弦图

￡神魔★判官ぃ 2024-04-06 10:16 86阅读 0赞

### 线段生成器 ###

![在这里插入图片描述][e22372b6a8694429aee04a29eaa8178c.png_pic_center]

let lines = [
        [50, 50],
        [150, 50],
        [50, 125],
        [100, 25],
        [150, 125],
        [50, 50]
    ]
    let linePath = d3.line();
    
    d3.select('body')
        .append('svg')
        .append('path')
        .attr('d', linePath(lines))
        .attr('stroke', 'red')
        .attr('fill', d3.rgb('yellow'));

### 区域生成器 ###

![在这里插入图片描述][b82d0065cc99428b8b4f1797bd89faab.png_pic_center]

let area = [
        [50, 100],
        [75, 75],
        [120, 100],
        [60, 20],
        [130, 50],
    ]
    let areaPath = d3.area();
    
    d3.select('body')
        .append('svg')
        .append('path')
        .attr('d', areaPath(area))
        .attr('stroke', 'red')
        .attr('fill', d3.rgb('yellow'));

### 弧生成器 ###

![在这里插入图片描述][9ef7f152955d4b11b3d94b498ee971ce.png_pic_center]

let data = {
        startAngle: 0, endAngle: Math.PI * 1.75};
    
    let arcPath = d3.arc().innerRadius(50).outerRadius(100);
    
    d3.select('body')
        .append('svg')
        .attr('width', 500)
        .attr('height', 500)
        .append('path')
        .attr('d', arcPath(data))
        .attr('transform', 'translate(150, 150)')
        .attr('stroke', 'red')
        .attr('stroke-width', '3px')
        .attr('fill', d3.rgb('yellow'));

### 饼图 ###

![在这里插入图片描述][07b2b4f40f604381bcaa46315365db4c.png_pic_center]

### 符号生成器 ###

![在这里插入图片描述][bee13f4c1d8d414b82368146e25b5795.png_pic_center]

let data = new Array(d3.symbols.length).fill(null).map((d, i) => ({
        
        size: Math.random() * 30 + 200,
        type: d3.symbols[i]
    }));
    
    let symbol = d3.symbol()
        .size(d => d.size)
        .type(d => d.type);
    
    let svg = d3.select('body')
        .append('svg')
        .attr('width', 500)
        .attr('height', 500);
    
    svg.selectAll()
        .data(data)
        .enter()
        .append('path')
        .attr('d', d => symbol(d))
        .attr('transform', (d, i) => `translate(${
          100 + i * 30}, 100)`)
        .attr('fill', (d, i) => d3.rgb(d3.schemeCategory10[i]));

### 弦生成器 ###

![在这里插入图片描述][93442e6326bf485c8046777332dd3112.png_pic_center]

### 对角线生成器 ###

![在这里插入图片描述][da74f864ae294806a76c33a46fdf810a.png_pic_center]

let data = {
        
        source: {
        x: 10, y: 10},
        target: {
        x: 200, y: 200}
    }
    
    let diagonal = d => {
        
        return 'M' + d.source.y + ',' + d.source.x +
            'C' + (d.source.y + d.target.y) / 2 + ',' + d.source.x +
            ' ' + (d.source.y + d.target.y) / 2 + ',' + d.target.x +
            ' ' + d.target.y + ',' + d.target.x
    }
    
    let svg = d3.select('body')
        .append('svg')
        .attr('width', 300)
        .attr('height', 300);
    
    svg.append('path')
        .attr('d', diagonal(data))
        .attr('fill', 'none')
        .attr('stroke', 'red')
        .attr('stroke-width', 1);

[e22372b6a8694429aee04a29eaa8178c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/fa81a89b7e2c4576a9c0cfea554bdf23.png
[b82d0065cc99428b8b4f1797bd89faab.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/d8f323757f8f4fec8efbd33b142ba1ef.png
[9ef7f152955d4b11b3d94b498ee971ce.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/dd9d457663354bb598132501018a4d72.png
[07b2b4f40f604381bcaa46315365db4c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/ce9e1d7879d547acb9696b530bb18ac7.png
[bee13f4c1d8d414b82368146e25b5795.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/59052d9b3be347a0b017d33c94a27558.png
[93442e6326bf485c8046777332dd3112.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/3623817803d44aa686f5aef8ea81ffca.png
[da74f864ae294806a76c33a46fdf810a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/7daafdc0ac9d43f6bc711f4226bfd96a.png