[d3]环形图

1. 安装d3的依赖后，在页面中引入d3

import * as d3 from "d3"

2. 新建一个饼状图 d3.pie()

let pie = d3.pie()

3. 新建一个弧形生成器d3.arc()

let innerRadius = 80;	// 内半径，只要内半径不等于0，就是环形图，否则就是饼图
let outerRadius = 120;	// 外半径
let arc = d3.arc()
  .innerRadius (innerRadius )
  .outerRadius (outerRadius )

4. 定义每个环形部分的颜色

• 可以使用颜色比例尺

let colorScale = d3.scaleOrdinal()
  .domain(d3.range(dataset.length))	// dataset是环形图的数据，根据数据的个数去选择取几个比例尺中的颜色
  .range(d3.schemeCategory10);

• 可以自定义颜色

let colors = ['orange', 'green']

5. 给环形图注入数据

let dataset = [ 30 , 10 ];
let pieData = pie(dataset);	 // 将dataset转换成可以绘制环形图的数据

6. 绘制环形图

let gs = g.selectAll(".g")
  .data(pieData)	// 数据
  .enter()
  .append("g")
  .attr("transform","translate("+width/2+","+height/2+")")  // 环形图的摆放位置

7. 绘制环形图上的各个部分的环形

gs.append("path")
 .attr("d", function(d){
    // console.log(d, 'd')   // 每个扇形的相关数据
    return arc(d);  // 往弧形生成器中出入数据
  })
  .attr("fill",function(d, i){	// 填充环形的颜色
      // return colorScale(i);	// 如果使用的是颜色比例尺，return 这句
      return colors[i % 5];		// 如果是自定义颜色，return 这句，5是环形的个数
  });

8. 绘制环形图上的文字

gs.append("text")
  .attr("transform",function(d) {		//位置设在中心处
      return "translate("+arc.centroid(d)+")";
  })
  .attr("text-anchor","middle")
  .text(function(d){
      return d.data;		// 显示的文字内容
  })

完整代码

<template>
  <div id="serviceTepology" ref="serviceTepology">
    <svg width="500" height="500"></svg>
  </div>
</template>

<script>
import * as d3 from "d3"
export default {
  mounted () {
  	// ======== 这一段是使用d3，必须写的部分，无论画什么========
    let margin = {
    	top:60,
    	bottom:60,
    	left:60,
    	right:60
   	}
    let svg = d3.select("svg")		// 创建一个svg画布
    let width = svg.attr("width")
    let height = svg.attr("height")
    let g = svg.append("g")	
      .attr("transform","translate("+margin.top+","+margin.left+")");
	// ==========================================================
        
    let dataset = [ 30 , 10 ];   // 饼图数据
    
    // 设置一个color的颜色比例尺，为了让不同的扇形呈现不同的颜色
    let colorScale = d3.scaleOrdinal()
      .domain(d3.range(dataset.length))
      .range(d3.schemeCategory10);

    let colors = ['orange', 'green']
    
    //新建一个饼状图
    let pie = d3.pie();
    
    //新建一个弧形生成器
    let innerRadius = 80;//内半径
    let outerRadius = 100;//外半径
    let arc_generator = d3.arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius);
        
    //将原始数据变成可以绘制饼状图的数据，
    let pieData = pie(dataset);
        
    // 在有了绘制饼状图必须的数据后，我们就可以开始绘制了
    let gs = g.selectAll(".g")
      .data(pieData)
      .enter()
      .append("g")
      .attr("transform","translate("+width/2+","+height/2+")")  // 位置信息
        
    // 绘制饼状图的各个扇形
    gs.append("path")
      .attr("d", function(d){
        // console.log(d, 'd')   // 每个扇形的相关数据
        return arc_generator(d);  // 往弧形生成器中出入数据
      })
      .attr("fill",function(d, i){
          // return colorScale(i);
          return colors[i % 5];
      });
        
    //绘制饼状图上面的文字信息
    gs.append("text")
      .attr("transform",function(d) {  //位置设在中心处
        return "translate("+arc_generator.centroid(d)+")";
      })
      .attr("text-anchor","middle")
      .text(function(d){
        return d.data;
      })
  }
}
</script>