用于误差条的 plotly js 色阶答案

【问题标题】：plotly js colorscale for errorbars用于误差条的 plotly js 色阶
【发布时间】：2021-12-20 13:48:14
【问题描述】：

我想用色阶绘制分散的数据，并且误差条应该具有相同的色阶。

我找到了 plotly R (How do you make plotly error bars follow a colorscale?) 的答案，但我无法将其翻译成 js。同样使用name 属性对我来说似乎很奇怪。

这是一个最小的例子 (https://jsfiddle.net/ztqoemkd/1)

var trace1 = {
  type: 'scatter',
  mode: 'markers',
  y: [2, 1, 3],
  marker: {
    size: 20,
    color: [1, 2, 3],
    showscale: true
  },
  error_y: {
     type:'data',
     array: [0.5, 0.7, 0.5],
     color: [1, 2, 3]
  }
}

Plotly.newPlot('myDiv', [trace1])

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

【问题讨论】：

标签： javascript plotly

【解决方案1】：

我仍然不知道，是否可以与 plotly 本身一致地完成。
至少，我现在可以使用d3 开发这项工作：

// get colors from data points
rgbs = Plotly.d3.selectAll('.points .point').data().map(d => d.mcc)

// apply colors to errorbars
Plotly.d3.selectAll('.yerror').style('stroke', (d,i) => rgbs[i])

这是完整的演示：
https://jsfiddle.net/vor6e9wj
输出是

注意 1：缩放后，误差条再次变黑。
注2：不适用于scattergl。

编辑 1：要在缩放时保持颜色，可以将解决方法附加到 plotly_relayout（请参阅 https://jsfiddle.net/9s64y5cv）。

【讨论】：