Question

我使用JavaScript在Plotly中生成3D散点图。最初，我没有指定轴范围。但是，我想让用户在最初绘制绘图后手动设置zaxis范围。在该用户交互中，我想用现有（绘制的）设置填充范围值。如何从现有的Plotly scatter3d图表中提取zaxis范围？

Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv', function(err, rows) {
  function unpack(rows, key) {
    return rows.map(function(row) {
      return row[key];
    });
  }

  
  var data = [];
  
  for (i = 0; i < 24; i += 1) {

    var x_row = [], 
        y_row = [],
        z_row = unpack(rows, i);
    
    for (var j = 0; j < z_row.length; j++) {
       x_row.push(i);
       y_row.push(j);
    }
    
    data.push({
      x: x_row,
      y: y_row,
      z: z_row,
      mode: 'lines',
      line: {
        color: '#FF00FF'
      },
      type: 'scatter3d'
    });
  }
  
  Plotly.newPlot('myDiv', data);

  document.getElementById('cmax').innerHTML = 'Max: ' + data[0].cmax;
  document.getElementById('cmin').innerHTML = 'Min: ' + data[0].cmin;
});

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='cmax'></div>
<div id='cmin'></div>
<div id="myDiv"></div>

Answer 1

如评论中所示，它是散点图，下面的解决方案适用于3D曲面图。对于scatter3D绘图，Plotly根据输入数组的最小值和最大值计算轴范围。

sceneBounds[0][i] = Math.min(sceneBounds[0][i], objBounds[0][i] / dataScale[i]);

从那里您可以手动将范围设置为最小/最大值（+一些额外空间）或将范围保留为空并使用max resp填充默认值。最小值。

Plotly将max和min值设置为cmax resp。 cmin传递给newPlot函数的数据对象。

＆＃13;

Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv', function(err, rows) {
  function unpack(rows, key) {
    return rows.map(function(row) {
      return row[key];
    });
  }

  var z_data = []
  for (i = 0; i < 24; i += 1) {
    z_data.push(unpack(rows, i));
  }

  var data = [{
    z: z_data,
    type: 'surface'
  }];
  
  Plotly.newPlot('myDiv', data);
  
  document.getElementById('cmax').innerHTML = 'Max: ' + data[0].cmax;
  document.getElementById('cmin').innerHTML = 'Min: ' + data[0].cmin;
});

＆＃13;

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='cmax'></div>
<div id='cmin'></div>
<div id="myDiv"></div>

＆＃13;

从Plotly 3D获取zaxis系列

1 个答案: