range - 轴范围动态变化

Question

有谁知道如何通过按钮单击更改 plotly 的 scatter3D 中的轴范围。我使用重新布局，但它不起作用

function updatet() {
   Plotly.relayout(‘myDiv’, ‘zaxis.range’, [[0, 100]]);
}

什么都没有发生（我的范围仍然是 [0,1800]）

Answer 1

对于 3D 绘图zaxis.range，需要在内部scene才能工作。

注意：您的刻度看起来像一些复制和粘贴/自动格式化问题。

Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/3d-scatter.csv', function(err, rows) {
  function unpack(rows, key) {
    return rows.map(function(row) {
      return row[key];
    });
  }
  var trace1 = {
    x: unpack(rows, 'x1'),
    y: unpack(rows, 'y1'),
    z: unpack(rows, 'z1'),
    mode: 'markers',
    marker: {
      size: 12,
      line: {
        color: 'rgba(217, 217, 217, 0.14)',
        width: 0.5
      },
      opacity: 0.8
    },
    type: 'scatter3d'
  };
  var trace2 = {
    x: unpack(rows, 'x2'),
    y: unpack(rows, 'y2'),
    z: unpack(rows, 'z2'),
    mode: 'markers',
    marker: {
      color: 'rgb(127, 127, 127)',
      size: 12,
      symbol: 'circle',
      line: {
        color: 'rgb(204, 204, 204)',
        width: 1
      },
      opacity: 0.9
    },
    type: 'scatter3d'
  };
  var data = [trace1, trace2];
  var layout = {
    margin: {
      l: 0,
      r: 0,
      b: 0,
      t: 0,
    }
  };
  Plotly.newPlot('myDiv', data, layout);
});

document.getElementById('updateButton').addEventListener('click', function() {
  Plotly.relayout('myDiv', 'scene.zaxis.range', [0, 10 * Math.random()]);
});

<script src="https://cdn.plot.ly/plotly-latest.min.js">
</script>
<div id="myDiv" style="width:100%;height:100%"></div>
<button id='updateButton'>Change axis
</button>