plotly js独立图

Question

我正在尝试使用PlotlyJS绘制多个图。但是，每当我尝试缩放或滚动一个图时，其他图也会滚动和缩放，这不是理想的行为。如何使这些图相互独立，以便在缩放或滚动一个图时不会影响其他图？

这是我到目前为止尝试过的代码。 http://jsfiddle.net/madca03/s12jqnvo/

function rand(offset) {
  return Math.random() + offset;
}

let time = new Date();

let trace1 = {
  x: [time],
  y: [rand(1)],
  mode: "lines",
  line: { color: "#80CAF6", shape: "spline" },
  name: "node1"
};

let trace2 = {
  x: [time],
  y: [rand(5)],
  mode: "lines",
  line: { color: "#fff83a", shape: "spline" },
  name: "node2"
};

let trace3 = {
  x: [time],
  y: [rand(7)],
  mode: "lines",
  line: { color: "rgba(47, 243, 21, 0.931)", shape: "spline" },
  name: "node3"
};

let trace4 = {
  x: [time],
  y: [rand(15)],
  mode: "lines",
  line: { color: "#80CAF6", shape: "spline" },
  name: "node1"
};

let trace5 = {
  x: [time],
  y: [rand(17)],
  mode: "lines",
  line: { color: "#fff83a", shape: "spline" },
  name: "node2"
};

let trace6 = {
  x: [time],
  y: [rand(20)],
  mode: "lines",
  line: { color: "rgba(47, 243, 21, 0.931)", shape: "spline" },
  name: "node3"
};

let traces = [{ name: "node1" }, { name: "node2" }, { name: "node3" }];
let data = [trace1, trace2, trace3];
let data2 = [trace4, trace5, trace6];

let layout = {
  margin: {
    l: 50,
    r: 50,
    b: 50,
    t: 20,
    pad: 4
  },
  showlegend: false,
  plot_bgcolor: "#3e3e3e",
  paper_bgcolor: "#3e3e3e",
  xaxis: {
    color: "white",
    tickcolor: "white",
    linecolor: "#575757",
    gridcolor: "#575757",
    gridwidth: 2,
    zerolinecolor: "#575757",
    zerolinewidth: 4
  },
  yaxis: {
    color: "white",
    tickcolor: "white",
    linecolor: "#575757",
    gridcolor: "#575757",
    gridwidth: 2,
    zerolinecolor: "#575757",
    zerolinewidth: 4
  }
};

let traces_to_update = [];
let trace_name_to_update = "node1";
let trace_index_to_update = traces.findIndex(
  trace => trace.name === trace_name_to_update
);
traces_to_update.push(trace_index_to_update);

trace_name_to_update = "node2";
trace_index_to_update = traces.findIndex(
  trace => trace.name === trace_name_to_update
);
traces_to_update.push(trace_index_to_update);

trace_name_to_update = "node3";
trace_index_to_update = traces.findIndex(
  trace => trace.name === trace_name_to_update
);
traces_to_update.push(trace_index_to_update);

Plotly.newPlot("div1", data, layout, {
  displayModeBar: false,
  responsive: true
});

Plotly.newPlot("div2", data2, layout, {
  displayModeBar: false,
  responsive: true,
  scrollZoom: true
});

Plotly.newPlot("div3", data, layout, {
  displayModeBar: false,
  responsive: true
});

var cnt = 0;

var interval = setInterval(function() {
  var time = new Date();

  var update = {
    x: [[time], [time], [time]],
    y: [[rand(1)], [rand(5)], [rand(7)]]
  };

  var update2 = {
    x: [[time], [time], [time]],
    y: [[rand(15)], [rand(17)], [rand(20)]]
  };

  Plotly.extendTraces("div1", update, traces_to_update);
  Plotly.extendTraces("div2", update2, traces_to_update);
  Plotly.extendTraces("div3", update, traces_to_update);

  if (cnt === 100) clearInterval(interval);
}, 500);