簡體   English   中英

使用D3和React縮放時更新數據

[英]Update data while zooming with D3 and React

我正在使用D3和React繪制具有縮放和平移行為的簡單折線圖。 我需要使數據相對於實際縮放中的第一個值。

例如,如果我的數據集的Y值是[0、2%,3%和4%],而我當前正在查看最后3個值,則它應該繪制[0、1.02%,2.04%]。

我試圖保留原始數據集的副本並在zoom上更新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 });
}

在設置新的viewportData和Y縮放比例后,React調用我的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();
}

這種方法行不通。 我認為我沒有正確執行更新模式。 如何實現這種行為? 我將工作圖表移植到筆中, 代碼如下

我結束了縮放事件之后的數據更新,du。

並不是我一直在尋找的行為,但它正在起作用。

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM