如何用d3生成一个饼图

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 + ")";
      })

  }