PlotlyJS Mapbox 密度热图颜色不一致

Question

在查看 https://plotly.com/javascript/mapbox-density-heatmaps 上提供的演示时，我发现最后一个显示地震震级的热图图表的着色存在问题。当用户将鼠标移出太多时，颜色似乎不正确。目前尚不清楚这是有意为之的行为还是错误，但它对最终用户来说似乎不符合逻辑，而且看起来像是错误。

例如，如果用户鼠标移得太远，会显示许多黄色区域，给人的印象是所有这些区域都经历了 9 级地震。结果，就像所提供的图像所示，几乎整个地球都经历了 9 度地震。然而，当用户放大以检查特定位置时，黄色点消失，导致没有黄色点。这种行为使图表对最终用户产生严重误导。

我想问问你是否知道这个问题。是否有可以修改的解决方法或设置，以防止在用户鼠标移出太多时发生这种情况？

同样的行为也有之前的图表，它是 densitymapbox 的类型：

---

但是即使鼠标颜色不对：

以上这2点有非常不同的价值。一个是 7，另一个是 5.5。根据图例比例我们应该看到不同的颜色

但是它们非常相似，最终用户在这里看不出区别。

你可以在这里测试

https://codepen.io/pen?&prefill_data_id=7ef37bb4-967d-444d-b587-fee7363cc1c5 https://codepen.io/pen?&prefill_data_id=4648058a-b909-4075-869c-87c7d5fa2f74

或运行此代码：

d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/earthquakes-23k.csv',

  function(err, rows){function unpack(rows, key) {return rows.map(function(row){ return row[key];

})};


var data = [{

  lon: unpack(rows, 'Longitude'), lat: unpack(rows, 'Latitude'), radius:10,

  z: unpack(rows, 'Magnitude'), type: "densitymapbox", coloraxis: 'coloraxis',

  hoverinfo: 'skip'}];


var layout = {

    mapbox: {center: {lon: 60, lat: 30}, style: "outdoors", zoom: 2},

    coloraxis: {colorscale: "Viridis"}, title: {text: "Earthquake Magnitude"},

    width: 600, height: 400, margin: {t: 30, b: 0}};


var config = {mapboxAccessToken: "your access token"};


Plotly.newPlot('myDiv', data, layout, config);

})

或这个：

var data = [

  {type: "densitymapbox", lon: [10, 20, 30], lat: [15, 25, 35], z: [1, 3, 2],

   radius: 50, colorbar: {y: 1, yanchor: 'top', len: 0.45}},

  {type: 'densitymapbox', lon: [-10, -20, -30], lat: [15, 25, 35],

   radius: [50, 100, 10],  colorbar: {y: 0, yanchor: 'bottom', len: 0.45}

  }];


var layout = {mapbox: {style: 'light', center: {lat: 20}}, width: 600, height: 400};


var config = {mapboxAccessToken: "your access token"};


Plotly.newPlot('myDiv', data, layout, config);