Plotly.js 曲面图数据格式

Question

我正在尝试通过 for 循环自己生成点来绘制函数的曲面图。但是该图没有显示。我读过曲面图的数据变量中的 z 条目必须是一个数组数组，但即使这样也没有显示出该图。

var zPts = [];
var xPts = [];
var yPts = [];

for(x=0; x<1; x+=0.01) {
  for (y=0; y<1; y+=0.01) {
  zPts.push([Math.sin(x*y)]);
  yPts.push(y);
  xPts.push(x);
  }
  }

var data = [{
    z: zPts,
    x: xPts,
    y: yPts,
    type: 'surface'
  }];
  
  var layout = {
    title: 'My Plot',
    autosize: false,  
    width: 500,
    height: 500,
    margin: {
      l: 65,
      r: 50,
      b: 65,
      t: 90,
    }
  };
  
  Plotly.newPlot('theDiv', data, layout);

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

Answer 1

经过一番折腾，我发现下面的代码可以生成所需的图表只需要添加 3 个临时数组变量。我相信数据的正确格式是 x、y 和 z 数组必须都是一个数组数组，每个子数组的大小对于所有 3 个都相同。

var zPts = []; 
var xPts = [];
var yPts = [];


for(x=0; x<10; x+=0.1) {
  let zTemp = [];
  let yTemp = [];
  let xTemp = [];
  for (y=0; y<10; y+=0.1) {
    zTemp.push(Math.sin(x)*Math.cos(y));
    yTemp.push(y);
    xTemp.push(x);
  }
  zPts.push(zTemp);
  yPts.push(yTemp);
  xPts.push(xTemp);
  }

var data = [{
    z: zPts,
    x: xPts,
    y: yPts,
    type: 'surface'
  }];
  
  var layout = {
    title: 'My Plot',
    autosize: false,  
    width: 500,
    height: 500,
    margin: {
      l: 65,
      r: 50,
      b: 65,
      t: 90,
    }
  };
  
  Plotly.newPlot('theDiv', data, layout);

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

Plotly.js 曲面图数据格式

Plotly.js surface plot data formatting

javascript

plotly

plotly.js