- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

d3成神之路(五)：扇形图，饼图

拿我格子衫来发表于 2022/03/17 23:00:07 2022/03/17

【摘要】制作扇形其实也是使用 svg的 path 这个属性，重要的是计算各个扇形区域的点，与弧度效果图首先需要使用源数据生成相应的弧度信息使用d3.pie() const data = [1,...

制作扇形其实也是使用 svg的 path 这个属性，
重要的是计算各个扇形区域的点，与弧度
效果图

首先需要使用源数据生成相应的弧度信息

使用d3.pie()

const data = [1, 1, 2, 3, 5, 8, 13, 21];
const arcs = d3.pie()(data);

  
 
  1
  2

生成弧度后再使用 d3.arc() 来进行绘制 path

const arc = d3.arc()
      .innerRadius(0)
      .outerRadius(Math.min(innerWidth, innerHeight) / 2 - 1)

  
 
  1
  2
  3

这里还学到一个技巧就是使用源数据的某一个属性来生成一个颜色

const color = d3.scaleOrdinal()
      .domain(data.map(d => d.name))
      .range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data.length).reverse())

  
 
  1
  2
  3

详细代码

<!DOCTYPE html>
<html>

<head>
  <title>基础饼图</title>
  <link rel="stylesheet" href="../../css/index.css">
</head>

<body>

  <svg id="main" width="800" height="600"></svg>

  </div>

  <script src="../../js/d3.min.js"></script>
  <script src="../../js/mchart.js"></script>
  <script>

    function getSvgInfo() {
      const svg = d3.select("#main")
      const width = svg.attr('width')
      const height = svg.attr('height')
      const margin = { top: 30, right: 60, bottom: 30, left: 60 }
      const innerHeight = height - margin.top - margin.bottom
      const innerWidth = width - margin.left - margin.right
      const config = {
        colors: [
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc"
        ],
        opacity: 0.8,
        tickTxt: {
          fontSize: '2em',
          color: '#6E7079'
        },
        chartTitle: {
          text: '基础饼图',
          fontSize: '18px',
          color: '#464646'
        }
      }

      return {
        svg,
        width,
        height,
        margin,
        innerHeight,
        innerWidth,
        config
      }
    }

    const data = [
      { value: 1048, name: '搜索引擎' },
      { value: 735, name: '直接访问' },
      { value: 580, name: '邮件营销' },
      { value: 484, name: '联盟广告' },
      { value: 300, name: '视频广告' }
    ]

    const {
      svg,
      width,
      height,
      margin,
      innerHeight,
      innerWidth,
      config
    } = getSvgInfo()

    const chart = svg.append('g')
      .attr('id', 'maingroup')
      .attr('transform', `translate(${margin.left},${margin.top})`)

    const arc = d3.arc()
      .innerRadius(0)
      .outerRadius(Math.min(innerWidth, innerHeight) / 2 - 1)

    const color = d3.scaleOrdinal()
      .domain(data.map(d => d.name))
      .range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data.length).reverse())

    const pie = d3.pie()
      .sort(null)
      .value(d => d.value)

    const arcs = pie(data);

    chart.append("g")
      .attr("stroke", "white")
      .selectAll("path")
      .data(arcs)
      .join("path")
      .attr('transform', `translate(300,300)`)
      .attr("fill", d => color(d.data.name))
      .attr("d", arc)

    setChartTitle(chart)


    function setChartTitle(chart) {
      chart.append('text').text(config.chartTitle.text)
        .attr('font-size', config.chartTitle.fontSize)
        .attr('color', config.chartTitle.color)
        .attr('transform', `translate(${innerWidth / 2}, ${-10})`)
        .attr('text-anchor', 'middle')
        .attr('font-weight', 'bold')
    }



  </script>
</body>

</html>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60
  61
  62
  63
  64
  65
  66
  67
  68
  69
  70
  71
  72
  73
  74
  75
  76
  77
  78
  79
  80
  81
  82
  83
  84
  85
  86
  87
  88
  89
  90
  91
  92
  93
  94
  95
  96
  97
  98
  99
  100
  101
  102
  103
  104
  105
  106
  107
  108
  109
  110
  111
  112
  113
  114
  115
  116
  117
  118
  119
  120
  121
  122
  123