Pie(饼图)

简介

在布局的应用中，最简单的就是饼状图。 数据是不能直接绘饼图，需要一个部分一个部分的绘制。绘制饼状图的一个部分，需要知道一段弧的起始角度和终止角度，这些值都不存在于原始数据数组中。因此，需要用到Pie布局，布局的作用就是；计算出适合于作图的数据。

主程序

代码里面已经标注详细的步骤，这里就不再赘述了。

  // <div id="svgAll" class="svg-all"></div>
  var width = 500;
  var height = 500;
  var dome = document.getElementById('svgAll');
  var svg = d3.create("svg").attr("width", width).attr("height", height);

  var g = svg.append("g").attr("transform", "translate(0,0)");

  // 饼图
  var pie = d3.pie();
  var dataset = [30, 10, 43, 55, 13];
  // 颜色比例尺
  var colorScale = d3.scaleOrdinal()
    .domain(d3.range(dataset.length))
    .range(d3.schemeCategory10);
  // 弧形生成器
  var arc_generator = d3.arc()
    .innerRadius(0)
    .outerRadius(200);

  var pieData = pie(dataset);
  var gs = g.selectAll(".g")
    .data(pieData)
    .enter()
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
  gs.append("path")
    .attr("d", function (d) {
      return arc_generator(d);
    })
    .attr("fill", function (d, i) {
      return colorScale(i);
    });
  // 文字
  gs.append("text")
    .attr("transform", function (d) {
      return "translate(" + arc_generator.centroid(d) + ")";
    })
    .attr("text-anchor", "middle")
    .text(function (d) {
      return d.data;
    })

  dome.appendChild(svg.node());