Обновите значения 'x' и 'y' трассы, используя Plotly.update ()

Question

Можно ли обновить свойства трассы x и y, используя Plotly.update()?

Обновление свойства marker.color трассировки работает хорошо. Но когда я пытаюсь обновить свойства x или y, след исчезает с графика. И нет никаких признаков того, что что-то пошло не так в консоли. Я хотел бы обновить значения по индексу трассировки , и функция обновления выглядит как правильный инструмент.

Возможно, в документации есть подсказка для Plotly.react() :

Важное примечание: Чтобы использовать этот метод для отображения новых элементов в массивах с data, таких как x или marker.color et c, эти элементы должны быть либо добавлены неизменным (т. е. идентификатор родительского массива должен быть изменен) или значение layout.datarevision должно быть изменено.

Хотя это может быть совершенно несвязанным, потому что я могу обновить marker.color, используя Plotly.update(), не сталкиваясь с layout.datarevision.

Пример выполнения:

(пример кода здесь )

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>