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

Posted 2023-02-18

【中文标题】使用 Plotly.update() 更新轨迹的“x”和“y”值

【英文标题】：Update ‘x’ and ‘y’ values of a trace using Plotly.update()

【发布时间】：2020-06-25 22:46:36

【问题描述】：

是否可以使用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，但没有得到任何回复。也许这里有人知道。

【参考方案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>