如何用d3生成一个饼图

代码语言：javascript复制
initPieChart: function (el, data) {
    // var data = [2, 4, 8, 10];

    // 得到容器的尺寸
    var width = el.width(),
      height = el.height();
    var radius = Math.min(width, height) / 3;

    // 清空容器
    d3.select(el[0])
      .select("svg")
      .remove();
      
    // 容器插入svg
    var svg = d3.select(el[0])
      .append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
    
    // 创建内部容器放置图表，并且移动到中间
    g = svg.append("g").attr("transform", "translate("   width / 2   ","   height / 2   ")");

 
    // 根据数据key从颜色序列取得固定颜色
    var color = d3
      .scaleOrdinal()
      .domain(
        data.map(function (d) {
          return d.lx;
        })
      )
      .range([
        '#4aff14', '#f52c56', '#41a3f4', '#f2c92f'
      ]);

    // d3 v4 api指定使用数据的哪个字段生成pie
    var pie = d3.pie()
      .value(function (d) { return d.overps });

    // pie部分的arc,得到一个函数，用来生成pie每个部分的path路径
    var arc = d3.arc()
      .innerRadius(0)
      .outerRadius(radius);

    var innerArc = d3.arc()
      .innerRadius(0)
      .outerRadius(radius * 2);

    var outerArc = d3.arc()
      .innerRadius(0)
      .outerRadius(radius * 2.5);

    //pie容器
    var arcs = g.selectAll("arc")
      .data(pie(data))
      .enter()
      .append("g")
      .attr("class", "arc")

    //生成pie每个部分的path，并且赋值path的路径
    arcs.append("path")
      .attr("fill", function (d, i) {
        return color(i);
      })
      .attr("d", arc);

    var key = function (d) {
      return d.data.lx;
    };

    var polyline = g.selectAll("polyline")
      .data(pie(data), key)

    // 生成指示折现
    polyline.enter()
      .append("polyline")
      .style("stroke", '#fff')
      .style('fill', 'none')
      .style("stroke-width", '2px')
      .attr("points", function (d) {
        // var pos = outerArc.centroid(d);
        // pos[0] = radius * 0.5 * (midAngle(d) < Math.PI ? 1 : -1);
        var r1 = arc.centroid(d)
        var result = [innerArc.centroid(d), outerArc.centroid(d)]
        console.log(result)
        return result
      });

    function midAngle (d) {
      return d.startAngle   (d.endAngle - d.startAngle) / 2;
    }

    var text = g.selectAll("text")
      .data(pie(data), key);

    text.enter()
      .append("text")
      .attr("dy", ".35em")
      .attr('fill', '#fff')
      .attr('text-anchor', function (d) {
        return midAngle(d) < Math.PI ? "start" : "end";
      })
      .text(function (d) {
        return d.data.lx;
      })
      .attr('transform', function (d) {
        var pos = outerArc.centroid(d);
        return "translate("   pos   ")";
      })

  }
0 人点赞