在使用D3和React缩放时更新数据

Update data while zooming with D3 and React

本文关键字：缩放 更新 数据 React D3      更新时间：2023-09-26

我使用D3和React来绘制一个简单的折线图，其中包含缩放和平移行为。我需要使数据相对于实际缩放的第一个值

例如，如果我的数据集Y值为[0,2%，3%和4%]，而我目前正在查看最后3个值，它应该绘制[0,1.02%，2.04%]。

我试图保留原始数据集的副本，并在缩放时更新viewportDataset:

_onZoom (zoom) {
  let state = this.state,
      data = state.data,
      viewportData = [],
      filteredData,
      y = state.y,
      x = state.x,
      minDate = d3.min(data, d => d.date),
      maxDate = d3.max(data, d => d.date),
      xZoom, yExtent, yDiff;
  if (x.domain()[0] < minDate) {
    xZoom = zoom.translate()[0] - x(minDate) + x.range()[0];
    zoom.translate([xZoom, 0]);
  }
  else if (x.domain()[1] > maxDate) {
    xZoom = zoom.translate()[0] - x(maxDate) + x.range()[1];
    zoom.translate([xZoom, 0]);
  }
  filteredData = data.filter((d, i) => {
    if ((d.date >= x.domain()[0]) && (d.date <= x.domain()[1])) {
      return [d.daily, d.accumulated, d.dailyRelative];
    }
  });
  let factor = filteredData[0].dailyRelative;
  filteredData.map(d => {
    d.dailyRelative = d.dailyRelative / factor;
    viewportData.push(d);
  });
  y.domain(d3.extent(filteredData, d => d.dailyRelative));
  this.setState({ y, viewportData });
}

React，在设置了新的viewportData和Y刻度后，调用我的updateChart图表函数:

_updateChart () {
   /* ... */
   let line = chart
    .select('g.data')
    .selectAll('path.line')
    .data([state.viewportData]);
   line.attr('d', d => this._line(d));
   line.enter().append('path.line')
     .attr('d', d => this._line(d));
   line.exit().remove();
}

这个方法不起作用。我觉得我的更新模式不对。我如何实现这种行为?我将我的工作图表移植到一支笔中，下面是代码

我最终在缩放事件之后更新了数据。

不完全是我想要的行为，但它正在工作。

_onZoomend () {
  /* ... */
  chart.select('g.data path.line')
    .transition()
    .attr('d', d => this._line(d, factor));
},
相关文章：