如何在plotly.js中使用SVG作为自定义标记替代默认字符串/数字符号

plotly.js原生的marker.symbol配置仅支持传入字符串和数字作为标记样式，无法直接传入SVG，可通过layout.shapes绑定数据坐标的方式实现自定义SVG标记，具体实现步骤如下：

步骤1：隐藏原生散点标记 #

先将原生散点标记设置为完全透明，保留点位坐标数据供后续自定义标记定位使用：

const trace = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  mode: 'markers',
  marker: {
    opacity: 0
  }
};

步骤2：提取SVG的path路径 #

如果是现有SVG文件，直接提取文件内<path>标签的d属性值即可作为自定义标记的路径，示例如下：

// 示例为星形SVG的path路径
const customSvgPath = 'M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z';

步骤3：批量生成shapes配置 #

遍历所有散点的坐标，为每个点位生成对应的SVG形状配置，绑定数据坐标系实现位置对齐：

const shapes = trace.x.map((xVal, index) => {
  const yVal = trace.y[index];
  const iconSize = 0.5; // 可根据坐标轴范围自定义图标大小
  return {
    type: 'path',
    path: customSvgPath,
    xref: 'x',
    yref: 'y',
    x0: xVal - iconSize/2,
    y0: yVal - iconSize/2,
    x1: xVal + iconSize/2,
    y1: yVal + iconSize/2,
    fillcolor: '#ff0000', // 自定义图标填充色
    line: {
      width: 0
    }
  }
});

const layout = {
  shapes: shapes,
  xaxis: {range: [0, 5]},
  yaxis: {range: [8, 18]}
  // 其余layout配置可按需补充
};

步骤4：渲染图表 #

正常调用plotly渲染方法即可：

Plotly.newPlot('myDiv', [trace], layout);

优化提示 #

• 不同点位需要使用不同SVG的场景，可提前定义path数组，遍历时按索引取值即可
• 需要适配图表缩放、平移操作的话，可以监听plotly_relayout事件，触发后重新计算shapes位置并更新配置
• 要给自定义标记增加hover交互效果，可绑定plotly_hover事件，通过点位索引找到对应shape修改样式后调用Plotly.relayout更新即可

内容的提问来源于stack exchange，提问作者code_dude