Question

我正在一个D3.js项目中，该项目包含的雷达图会随着动画而逐渐更新（代码主要基于Jorge Sancha的区块here）。我目前已经创建了一个函数，该函数将使用来自先前状态（一组值）和预期状态的动画来创建图表，并且在提供两个所需的数据集的情况下，该函数可以正常工作。

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

我进行了查找，我相信这是由于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))
    });
}

这是我正在尝试运行的代码，但一次加载后无法正常工作。

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

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

我是D3的新手，所以我可能做错了什么：非常感谢您的帮助！

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

0 个答案: