从传单地图更新D3饼图数据

Question

我有一个传单地图图层作为JSON。作为用户，我想单击每个功能（onEachFeature），并且竞赛数据应更新每个功能的饼图。

在下面的代码中，无论我单击哪个功能，我的图表都具有静态数据，并且不会更新。我不确定如何结合代码来为每个单击的功能更新此饼图。

我从全局变量开始

var ID, totPop, totWhi, totBlk, totAsi, totHsp, totOth, pctWhi, pctBlk, pctAsi, pctHsp, pctOth, race = [];

这是用于单击地图图层上的每个要素并生成数据的JS代码

OMLayer = L.geoJSON(OM, {
  style: function(feature) {
    return {
      fillColor: getColor(feature.properties.INDXCATG),
      weight: 1,
      opacity: 1,
      color: '#B2B2B2',
      fillOpacity: 0.7
    };
  },
  onEachFeature: function(feature, layer) {
    layer.on({
      click: highlightFeature,
      popupclose: resetHighlight
    });
    pctWhi = 0;
    pctBlk = 0;
    pctAsi = 0;
    pctHsp = 0;
    pctOth = 0;
    ID = feature.properties.GEOID;
    oppCat = feature.properties.INDXCATG;
    totPop = feature.properties.TOT_POP;
    totWhi = feature.properties.TOT_NHW;
    totBlk = feature.properties.TOT_BLK;
    totAsi = feature.properties.TOT_ASI;
    totHsp = feature.properties.TOT_HSP;
    totOth = feature.properties.TOT_OTH;
    pctWhi = ((totWhi) * 100 / (totPop)).toFixed(2);
    pctBlk = ((totBlk) * 100 / (totPop)).toFixed(2);
    pctAsi = ((totAsi) * 100 / (totPop)).toFixed(2);
    pctHsp = ((totHsp) * 100 / (totPop)).toFixed(2);
    pctOth = ((totOth) * 100 / (totPop)).toFixed(2);
    race = [{
        label: "Non-Hispanic Whites",
        pct: pctWhi
      },
      {
        label: "African Americans",
        pct: pctBlk
      },
      {
        label: "Asians",
        pct: pctAsi
      },
      {
        label: "Hispanics/Latinos",
        pct: pctHsp
      },
      {
        label: "Others",
        pct: pctOth
      }
    ];

    layer.on({
      click: drawPie,
    });
  }

}).addTo(Rmap);

还有绘制饼图的代码

function drawPie(e) {

  var layer = e.target;
  var w = 150;
  var h = 150;

  var outerRadius = w / 2;
  var innerRadius = 0;
  var svg = d3.select(".graphControl")
    .append('svg')
    .attr('width', w)
    .attr('height', h);
  var g = svg.append("g")
    .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");
  var color = d3.scaleOrdinal(d3.schemeCategory10)
    .domain([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
  var path = d3.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius);
  var labelText = d3.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius);
  var pie = d3.pie()
    .value(function(race) {
      return race.pct;
    });

  var arc = g.selectAll(".arc")
    .data(pie(race))
    .enter()
    .append("g")
    .attr("class", "arc");

  arc.append("path")
    .attr("stroke", "#fff")
    .attr("d", path)
    .style("fill", function(d, i) {
      return color(i);
    });

  arc.append("text")
    .attr("transform", function(d) {
      return "translate(" + labelText.centroid(d) + ")";
    })
    .style("font-size", "10px")
    .attr('text-anchor', 'middle')
    .text(function(race, i) {
      return race.label;
    });
}

请帮助