React D3.js pie chart | 解决label重叠的问题

前面有一个月的时间，研究过基于React的dashboard开发，也试过用react-d3-compoments.js来生成图表，但是使用起来仍然有诸多限制。于是最后选择用原生的D3.js

其中，在制作饼图 pie chart的过程中，碰到了label重叠的问题，在此把解决方案写出来，给有需要的同学参考。

1. label重叠的主要原因：

当pie slice差距过大，有的slice特别大，而有的slice特别小，而且碰巧这些小的slice对应的数据在数组中正好相邻，就会出现label重叠。

试试比较这两组数据： 

Sample 1:
data = {label: 'pie chart', values:[{"name":"Aaaaaaa","value":3}, 
      {"name":"Bbbbbbb","value":1},
      {"name":"Ccccccc","value":2},
      {"name":"Ddddddd","value":90},
      {"name":"Eeeeeee","value":76},
      {"name":"Fffffff","value":86}
    ]}

Sample 2:
data = {label: 'pie chart', values:[{"name":"Aaaaaaa","value":1}, 
      {"name":"Bbbbbbb","value":90},
      {"name":"Ccccccc","value":2},
      {"name":"Ddddddd","value":86},
      {"name":"Eeeeeee","value":3},
      {"name":"Fffffff","value":76}
    ]}

2. 解决的方法：

1）对原始数据进行排序，让大数据和小数据相间，也就是上面的Sample 2.

2) 调整label的纵坐标，按照比例进行上移或者下移。

3. Details:

render:

render() {
    var data = this.formatData();
    return (
      this.make_piechart(data.values)
    )
  }

make_piechart() 方法：