Javascript D3.js图形未显示更新的数据

我正在从事一个D3.js项目，其中包括雷达图，该图会随着动画逐渐更新（代码主要基于Jorge Sancha的block）。我目前已经创建了一个函数，该函数将使用前一个状态（一组值）和预期状态的动画创建图表，并且在给定两组所需数据的情况下，该函数可以正常工作

但是，当我尝试在第一次调用后动态更新它时（即单击按钮），该函数不会更新图形

我查过了，我认为这是由于selectAll（）.data（）.enter（）没有更新以前绑定的数据，我尝试使用我找到的解决方案，但没有特别成功。我还尝试在更新调用上运行exit（）.remove（），但它不起作用

下面是我的代码：它接收“nextdata”（要显示的数据）和“prevdata”（动画开始的数据），并更新与数据对应的多边形和圆。代码本身在第一次运行时就很好——问题在于更新

function updateRadar(nextdata, prevdata = zerovalues, transitionTime = 1000) {
  var areas = radar.selectAll('polygon.area')
    .data([nextdata]).enter();

  areas.append('polygon')
    .classed('area', true)
    .attr('points', function () { //starting set of points for animation
      let prevpoints = new Array();
      for (let j = 0; j < 5; j++) {
        prevpoints.push(X(j, measureScale(prevdata[j].value)) + "," + Y(j, measureScale(prevdata[j].value)));
      }
      prevpoints.join(' ');
      return prevpoints;
    })
    .merge(areas)
    .transition()
    .duration(transitionTime)
    .attr('points', function (d) { //desired set of points (end result)
      return d.map(function (d, i) {
        var rad = measureScale(d.value);
        return [X(i, rad), Y(i, rad)];
      }).join(' ');
    });

  var points = radar.selectAll('circle.point')
    .data(nextdata).enter();

    points.append('circle')
    .classed('point', true)
    .attr('r', 7)
    .attr('cx', function (d, i) {
      return X(i, measureScale(prevdata[i].value));
    })
    .attr('cy', function (d, i) {
      return Y(i, measureScale(prevdata[i].value));
    })
    .merge(points)
    .transition()
    .duration(transitionTime)
    .attr('cx', function (d, i) {
      return X(i, measureScale(d.value))
    })
    .attr('cy', function (d, i) {
      return Y(i, measureScale(d.value))
    });
}

是完整代码-所需的行为是在单击按钮时将数据更新到下一组

我是D3的新手，所以我可能犯了一些可怕的错误：非常感谢您的帮助

updateRadar(data[1], data[0]);