Quiero trazar los datos dispersos con una escala de colores y las barras de error deben tener la misma escala de colores.
Encontré respuestas para plotly R ( ¿Cómo haces que las barras de error de plotly sigan una escala de colores? ), Pero no puedo traducirlo a js. También me parece extraño usar el atributo de name
para esto.
Aquí hay un ejemplo mínimo ( 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>
Todavía no sé si se puede hacer uno mismo de manera consistente con la trama misma.
Al menos, ahora podría desarrollar este trabajo con 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])
Aquí está la demostración completa:
https://jsfiddle.net/vor6e9wj
y la salida es
Nota 1: después de hacer zoom, las barras de error vuelven a ser negras.
Nota 2: No funciona para scattergl
.
Edición 1: para mantener los colores mientras se hace zoom, la solución se puede adjuntar a plotly_relayout
(ver https://jsfiddle.net/9s64y5cv ).