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

Question

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

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

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

Important Note: In order to use this method to plot new items in arrays under data such as x or marker.color etc, these items must either have been added immutably (i.e. the identity of the parent array must have changed) or the value of layout.datarevision must have changed.

虽然这可能完全无关，因为我是能够使用Plotly.update()更新marker.color而不影响layout.datarevision。

运行示例：

（codepen 示例 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>

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

Update ‘x’ and ‘y’ values of a trace using Plotly.update()

javascript

plotly

plotly.js

运行示例：

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

Update ‘x’ and ‘y’ values of a trace using Plotly.update()

javascript

plotly

plotly.js

运行 示例：

运行示例：