javascript - 良好的3D散点图和色阶

我正在通过其JavaScript API使用Plotly.js绘制一些3D散点图。看起来很棒：



在此图中，点的颜色基于点的z值。如果我将其更改为x或y值（通过更改data [0] .marker.color数组），然后重绘，则会出错：



我希望看到类似的东西：



无论我再次使用redraw还是newPlot。从数据计算出色标后，它看起来就保持了从数据到颜色的相同映射功能。所以我的问题是，当使用新的颜色数组进行重画时，如何使色标“无效”，以便重新计算事物。

更新

在etpinard的回答（谢谢！）中，有一个简单的完整示例。但是，此版本已将所有x，y和z数据很好地缩放在0和1之间。它具有：

function randomArray() {
  var out = new Array(N);
  for(var i = 0; i < N; i++) {
    out[i] = Math.random();
  }
  return out;
}

var x = randomArray(),
    y = randomArray(),
    z = randomArray();

我的数据对于x，y和z具有不同的单位。我可以使用以下方法来模拟：

function randomArray(lo,up) {
  var out = new Array(N);
  for(var i = 0; i < N; i++) {
    out[i] = lo+(up-lo)*Math.random();
  }
  return out;
}

var x = randomArray(0,1),
    y = randomArray(0,1),
    z = randomArray(0,1000);

使用此版本，第一个情节看起来不错：



我们根据点的z值为其着色。但是，当我单击“ x”按钮时，我看到：



我希望这有助于重现该问题。

最佳答案

您应该尝试使用Plotly.restyle进行排序操作。

这是一个示例：http://codepen.io/etpinard/pen/WrxRKO