是否可以在plotly.js箱形图上叠加标记？

Question

假设我正在使用plotly文档中的简单箱线图示例：

var data = [
  {
    y: [0, 1, 1, 2, 3, 5, 8, 13, 21],
    boxpoints: 'all',
    jitter: 0.3,
    pointpos: -1.8,
    type: 'box'
  }
];

Plotly.newPlot('myDiv', data);

我想在箱线图左侧的基础数据散点图之上覆盖一个标记。该标记将有自己的悬停文本和所有内容。这就是我想象的样子：

有没有办法在情节中做到这一点？我已经查遍了这方面的示例，但找不到任何看起来相关的内容。谢谢！

Answer 1

如果您在箱线图 (

pointpos = 0

) 的顶部绘制点，您可以添加另一条迹线，其 x 值与您的箱线图名称相同，在本例中为

trace 0

。

如果您在箱线图旁边绘制点，它会变得更加棘手，因为散点在轴上没有定义的 x 值。

您可以手动设置新点，但悬停信息仍处于旧位置。

var data = [{
    y: [0, 1, 1, 2, 3, 5, 8, 13, 21],
    boxpoints: 'all',
    jitter: 0.3,
    pointpos: 0,
    type: 'box'
  },
  {
    y: [0, 1, 1, 2, 3, 5, 8, 13, 21],
    boxpoints: 'all',
    jitter: 0.3,
    pointpos: 1.8,
    type: 'box'
  },
  {
    x: ['trace 0'],
    y: [18],
    name: 'My special marker',
    text: 'Some really interesting hover info',
    marker: {
      size: 20
    }
  },
  {
    x: ['trace 1'],
    y: [18],
    name: 'Another special marker',
    text: 'Some really interesting hover info',
    marker: {
      size: 20
    }
  }
];

Plotly.newPlot('myDiv', data);
var boxPoint = document.getElementsByClassName('trace boxes')[1].getElementsByClassName('point')[0];
var point = document.getElementsByClassName('scatterlayer')[0].getElementsByClassName('point')[1];
var y = point.attributes['transform'].value.split(',')[1];
var x = boxPoint.attributes['transform'].value.split(',')[0];
point.setAttribute('transform', x + ', ' + y);

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

Answer 2

但是，当我们运行上面的代码时，所有额外的标记都会添加到箱线图的垂直中间直线中。如何添加一些抖动？我尝试添加 jitter 和 pointpos，但是新跟踪点的位置没有改变。

知道我该怎么做吗？