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

Question

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

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

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

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

尽管这可能完全不相关的，因为我是能够更新marker.color使用Plotly.update()不会撞上了layout.datarevision。

运行示例：

（这里是codepen示例）

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>

注意：我也在plotly 社区论坛上问过这个问题，但没有得到任何回应。也许这里有人知道。

Answer 1

数据更新对象接受一个数组，其中包含要更新的每个轨迹的新 x / y 值数组。即，如果您只想更新一个跟踪，您仍然必须提供一个包含该跟踪的数组的数组： 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>