Sunburst Tutorial

效果图

image.png

源码

https://github.com/leicj/d3/tree/master/src/components/sunburst

初始化变量

    const width = 500;
    const height = 500;
    const radius = Math.min(width, height) / 2;
    const color = d3.scaleOrdinal(d3.schemeCategory10);

不同于canvas, 在svg中我们需要手动设置绘图的宽度和高度. 这里我们也设置了饼状图的半径大小以及颜色(使用d3.schemeCategory10).

设定svg绘图区域

    const g = d3.select('svg')
      .attrs({ width, height })
      .append('g')
      .attr('transform', `translate(${width / 2},${height / 2})`);

设定svg的宽高后, 给予一个<g>用于绘图, 将其中心设置到绘图区域的中心位置.

格式化数据

    const partition = d3.partition()
      .size([2 * Math.PI, radius]);

d3.partition用于切割绘图区域. 这里由于是饼状图, 所以需要size函数设定其"宽高", 由于圆形的面积为2 * Math.PI * r, 所以2 * Math.PI为弧度, r为半径, 通过size函数则达到完全分割的状态.

    const root = d3.hierarchy(nodeData)
      .sum(d => d.size);

这里使用d3.hierarchy, 则nodeData的数据必须满足"父子层级"关系, 例如:

{
  "name": "Eve",
  "children": [
    {
      "name": "Cain"
    },
    {
      "name": "Seth",
      "children": [
        {
          "name": "Enos"
        },
        {
          "name": "Noam"
        }
      ]
    },
    {
      "name": "Abel"
    },
    {
      "name": "Awan",
      "children": [
        {
          "name": "Enoch"
        }
      ]
    },
    {
      "name": "Azura"
    }
  ]
}

根据sum函数来判断子节点的大小顺序. 经过partition(root)后, root会演化成一个可供计算的父子结构:

image.png

计算弧度及长度

    const arc = d3.arc()
      .startAngle(d => d.x0)
      .endAngle(d => d.x1)
      .innerRadius(d => d.y0)
      .outerRadius(d => d.y1);

由于经过partition后, root已经保存了每个节点的信息, 这里d.x0为开始的角度, d.x1为结束的角度. d.y0为开始的长度, d.y1为结束的长度.

绘图

    g.selectAll('g')
      .data(root.descendants())
      .enter().append('g').attr('class', 'node').append('path')
      .attr('display', d => d.depth ? null : 'none')
      .attr('d', arc)
      .style('stroke', '#fff')
      .style('fill', d => color((d.children ? d : d.parent).data.name))

通过root.descendants(), 我们将数据按size的大小顺序传入. 通过arc, 进行绘制图形, 而填充的颜色由name决定, 同一个父结构下的图形具有相同的颜色.

添加文本

    g.selectAll('.node')
      .append('text')
      .attr('transform', d => `translate(${arc.centroid(d)})rotate(${this.computeTextRotation(d)})`)
      .attr('dx', '-20')
      .attr('dy', '.5em')
      .text(d => d.parent ? d.data.name : '');

arc.centroid将计算arc的中心点, rotate进行角度的调整.
如果角度在120~270区间, 则字体要进行旋转, 否则为颠倒的字:

  computeTextRotation = (d) => {
    const angle = (d.x0 + d.x1) / Math.PI * 90;
    return (angle < 120 || angle > 270) ? angle : angle + 180;
  }