D3：使用多個折線圖縮放以某種方式組合它們的數據數組

Question

我有一個包含一些隨機數據的圖表。 單擊按鈕時，我想在第一個圖表的頂部添加另一個圖表。 這很好用。 我還包括了縮放，它只適用於第一個圖表。 使用兩個圖表進行縮放會以某種方式將數據從第二個圖表復制到第一個圖表。

看看這個例子。 您應該能夠看到藍色圖表。 單擊按鈕添加綠色。 現在嘗試放大。藍色的消失了。 然而它並沒有消失。 它只是隱藏在綠色的后面。 盡管它們應該具有不同的值，但它們完美地重疊在一起。

https://codesandbox.io/s/31lz6zrln5

有任何想法嗎？

最好的問候，米爾科

Answer 1

在按鈕回調中，您可以修改數據元素。

  filtered = () => {
    const values = [...data].map(d => {
      d.value = rnd(25, 75);
      return d;
    });
    this.chart.filtered(values);
  };

您應該根據其他對象的字段返回新對象

  filtered = () => {
    const values = [...data].map(d => {
      return { timestamp: d.timestamp, value: rnd(25, 75) };
    });
    this.chart.filtered(values);
  };

同時更新縮放回調中的filtered路徑

  public zoom = () => {
    const newXScale = event.transform.rescaleX(this.xScale);
    const newYScale = event.transform.rescaleY(this.yScale);

    this.xAxisGroup.call(this.xAxis.scale(newXScale));
    this.yAxisGroup.call(this.yAxis.scale(newYScale));

    this.xGridGroup.call(this.xGrid.scale(newXScale));
    this.yGridGroup.call(this.yGrid.scale(newYScale));

    this.line.x(d => newXScale(d.timestamp)).y(d => newYScale(d.value));

    this.lineGroup.attr("d", this.line as any);
    this.lineFiltered.attr("d", this.line as any); // removed the comment of this line
  };