Question

我需要为Plotly的Surface图添加一个特征。功能是改变Z轴数据的范围。问题是它只能限制z轴值并且扩展值不起作用。例如如果我用300初始化'Z Max'一切都很好，但回到350将保持以前的值。虽然我有'z_data'作为我的参考值，在事件监听器调用函数时应该保留最初存在的数据，但这不会发生，并且它的值会更新为先前分配的'Z Max'值。

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(let i=0;i<24;i++) {
  z_data.push(unpack(rows,i));
}

var allData = [];

for (let i=0; i<z_data.length; i++) {
    for (let j=0; j<z_data[i].length; j++) {
    allData.push(z_data[i][j])   
  }
}

var max = Math.max(...allData);
var min = Math.min(...allData);

setPlot(min, max);

function setPlot(zmin, zmax) {

console.log(z_data)
var newZData = z_data;

console.log('min specified: ' + zmin)
console.log('max specified: ' + zmax)

for (let i=0; i<newZData.length; i++) {
    for (let j=0; j<newZData[i].length; j++) {
    if (newZData[i][j] < zmin) {
        newZData[i][j] = zmin
    }
    if (newZData[i][j] > zmax) {
        newZData[i][j] = zmax
    } 
  }
}
  var data = [{
             z: newZData,
             type: 'surface'
          }];

  var layout = {
    title: 'Mt Bruno Elevation',
    autosize: false,
    width: 500,
    height: 500,
    margin: {
      l: 65,
      r: 50,
      b: 65,
      t: 90,
    }
  };
  Plotly.newPlot('myDiv', data, layout);
}

var zMin = document.querySelector("#zmin");
var zMax = document.querySelector("#zmax");

function updatePlot(){
    setPlot(parseFloat(zMin.value), parseFloat(zMax.value));
}

zMin.addEventListener('change', updatePlot, false);
zMax.addEventListener('change', updatePlot, false);

使用JSFiddle更容易： http://jsfiddle.net/mwbbcyja/484/

每次执行函数时，都会覆盖JavaScript变量中的保留值

0 个答案: