javascript - D3 : Zoom with multiple line charts somehow combines their data arrays

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