D3：使用多个折线图缩放以某种方式组合它们的数据数组

Question

I've got a chart with some random data. On button click I'd like to add another chart on top of the first one. That works fine. I've also included zoom and it works fine with only the first chart. Zooming with both charts somehow copies the data from the second chart to the first one.

Have a look at the example. You should be able to see the blue chart. Click the button to add the green one. Now try to zoom in. The blue one disappears. However it is not gone. It is simply hidden behind the green one. They are perfectly on top of each other although they should have different values.

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

Any ideas?

Best regards, Mirco

Answer 1

In the button callback you modify the data elements.

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

You should return new objects based on the fields of the other objects

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

Also update the filtered path in the zoom callback

  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
  };