使用 Plotly.update() 更新轨迹的“x”和“y”值

Question

是否可以使用Plotly.update() 更新跟踪的x 和y 属性？

更新跟踪的marker.color 属性效果很好。但是当我尝试更新 x 或 y 属性时，跟踪会从图表中消失。并且没有迹象表明控制台出现问题。我想通过跟踪索引更新值，更新函数看起来是正确的工具。

Plotly.react()的文档中可能有线索：

重要提示：为了使用此方法在data 下的数组中绘制新项，例如x 或marker.color 等，这些项必须已添加不可变（即父数组的标识必须已更改）或layout.datarevision 的值必须已更改。

虽然这可能完全不相关，因为我我能够使用Plotly.update() 更新marker.color 而不会碰到layout.datarevision。

运行示例：

（代码笔示例here）

let myPlot = document.getElementById("graph");

let trace = {
  type: 'scatter',
  x: [0.5 * 255],
  y: [0.5 * 255],
  hoverinfo: "skip",
  mode: 'markers',
  marker: {color: "DarkSlateGrey", size: 20},
};

let layout = {
  title: "The Worm Hole",
  yaxis: { range: [0, 255] },
  xaxis: { range: [0, 255] },
};

let config = {responsive: true};

Plotly.newPlot(myPlot, [trace], layout, config);

function updateGraphPoint(cmd) {
  let x = Math.random() * 255;
  let y = Math.random() * 255;
  let z = Math.random() * 255;
  let update = null;
  if (cmd === "color") {
    update = {'marker.color': `rgb(${x}, ${y}, ${z})`};
  } else if (cmd === "position") {
    update = {'x': [x], 'y': [y]};
  }
  Plotly.update(myPlot, update, {}, [0]);
}

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<button onclick="updateGraphPoint('color')">Change my color!</button>
<button onclick="updateGraphPoint('position')">Change my position!</button>
<div id="graph"></div>

注意：我也asked this question on the the plotly community forum，但没有得到任何回复。也许这里有人知道。

Answer 1

数据更新对象接受一个数组，其中包含您要更新的每个跟踪的新 x / y 值数组。 IE。如果您只想更新一个跟踪，您仍然必须提供一个包含该跟踪的数组的数组： update = {'x': [[x]], 'y': [[y]]};

let myPlot = document.getElementById("graph");

let trace = {
  type: 'scatter',
  x: [0.5 * 255],
  y: [0.5 * 255],
  hoverinfo: "skip",
  mode: 'markers',
  marker: {color: "DarkSlateGrey", size: 20},
};

let layout = {
  title: "The Worm Hole",
  yaxis: { range: [0, 255] },
  xaxis: { range: [0, 255] },
};

let config = {responsive: true};

Plotly.newPlot(myPlot, [trace], layout, config);

function updateGraphPoint(cmd) {
  let x = Math.random() * 255;
  let y = Math.random() * 255;
  let z = Math.random() * 255;
  let update = null;
  if (cmd === "color") {
    update = {'marker.color': `rgb(${x}, ${y}, ${z})`};
  } else if (cmd === "position") {
    update = {'x': [[x]], 'y': [[y]]};
  }
  Plotly.update(myPlot, update, {}, [0]);
}

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<button onclick="updateGraphPoint('color')">Change my color!</button>
<button onclick="updateGraphPoint('position')">Change my position!</button>
<div id="graph"></div>