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

Question

假设我在剧情文档中使用simple box plot example：

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值。

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

＆＃13;

＆＃13;

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);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;