Javascript Plotly-根据值隐藏悬停工具提示上的数据？

当我将鼠标悬停在堆叠折线图上时，所有不在范围内的线都显示为零。有没有办法隐藏这些值而不是向悬停工具添加噪波

最小示例

Plotly.newPlot（'test'）[{
行：{shape:'vh'}，
stackgroup:'1'，
x:[1,2],，
y:[1,1],，
}, {
行：{shape:'vh'}，
stackgroup:'1'，
x:[3,4]，
y:[2,2],，
}, {
行：{shape:'vh'}，
stackgroup:'1'，
x:[3,4,5,6]，
y:[3,3,3,3]，
}], {
悬停模式：“x统一”，
宽度：“100%”，
});

作为一个整体和形象：

上下文 我有一张长达5年的时间序列图，其中包含了每条跨度为6-12英里的线。在每一条直线上绘图填充零，这使得悬停工具非常嘈杂

我想在每个x轴日期隐藏“0小时”条目，方法是确保Plotly不会0-pad线条，或者将工具提示配置为动态隐藏值。

TL；博士 下面是最终产品。看看我的逻辑是如何利用CSS自定义属性来对抗Plotly的持久性的。不幸的是，在深入研究Plotly的文档一段时间后，似乎没有一种简单或自然的方法来使用Plotly的功能实现这一点，但这不会阻止我们利用我们的知识来研究他们生态系统的自然法则

const testPlot=document.getElementById（'test'）；
Plotly.newPlot（'test'[{
行：{shape:'vh'}，
stackgroup:'1'，
x:[1,2，null，null]，
y:[1，1，null，null]，
}, {
行：{shape:'vh'}，
stackgroup:'1'，
x:[3,4，null，null]，
y:[2，2，null，null]，
}, {
行：{shape:'vh'}，
stackgroup:'1'，
x:[3,4,5,6]，
y:[3,3,3,3]，
}], {
悬停模式：“x统一”，
宽度：“100%”
});
const addpxtottransform=transform=>'translate（'+transform.replace（/[^\d，.]+/g'，）.split（'，'）.map（e=>e++'px'）。join（'，'）+'）；
['plotly_hover'、'plotly_click'、'plotly_legendclick'、'plotly_legendclick'、'plotly_legendcoolblick']{
testPlot.on（触发器、函数（数据）{
if（document.querySelector（'.hoverlayer>.legend text.legendtext'））{
const legend=document.querySelector（'.hoverlayer>.legend'）；
legend.style.setProperty（'--plotly legend transform'，addPxToTransform（legend.getAttribute（'transform'））；
const legendTexts=Array.from（document.querySelectorAll（'.hoverlayer>.legendtext.legendtext'））；
const legendTextGroups=Array.from（document.querySelectorAll（'.hoverlayer>.legend text.legendtext'））.map（text=>text.parentNode）；
const transformValues=[]；
legendTexts.filter（label=>（transformValues.push（addPxToTransform（label.parentNode.getAttribute（'transform'））、label.textContent.includes（':0'）））.forEach（zeroValue=>zeroValue.parentNode.classList.add（'zero-value'））；
legendTextGroups.filter（g=>！g.classList.contains（'zero-value'））.forEach（（g，i）=>g.style.setProperty（'--plotly transform'，transformValues[i]）；
const legendBG=document.querySelector（'.hoverlayer>.legend>rect.bg'）；
legendBG.style.setProperty（'--plotly legend bg height'，Math.floor（legendBG.nextElementSibling.getBBox（）.height+10）+“px”）；
}
});
});
.hoverlayer>.legend[style*=“--plotly legend transform”]{
变换：var（-plotly legend transform）！重要；
}
.hoverlayer>.legend>rect.bg[style*=“--plotly legend bg height”]{
高度：var（-plotly legend bg height）！重要；
}
.hoverlayer>.legend[style*=“--plotly transform”]{
变换：var（-plotly transform）！重要；
}
.hoverlayer>.legend.zero值{
显示：无！重要；
}

请输入代码和数据。@vestland已更新，谢谢@PattimuPrime如果有机会，请看一下我的解决方案，它使用内置的定制JS事件处理程序和CSS定制属性来规避插件的持久性。***我的解决方案仅针对您问题中的第一个示例。如果您发布了第二个示例的源代码，我也很乐意解决这个问题。它应该只需要一个小的调整。干杯哇！你坚持不懈地挖掘普洛特利的内在运作方式给我留下了深刻的印象，我可以证实这一点。@Pattimuprime谢谢！这是一个有趣的项目。谢谢你的挑战！很高兴我不是唯一一个对那些阴谋的内部结构感到头疼的人。昨天我也走了这么远，“这开始奏效，但在我的风格和那些似乎一直坚持使用的风格之间有很多摇摆不定的地方”，但后来决定把它放一天，看看是否有新的想法出现在脑海中。很高兴看到有人发现了。Plotly真的应该让这个东西更具可扩展性。我想玩一下你的解决方案，因为它真的很酷（如果可以的话，我会+5）。我减少了查询选择器的数量并简化了查询选择器，使用了更少的循环，不再需要
.parentNode
，并且使用了
eventData.points[reverseIdx].y==0
，而不是查找
label.textContent.includes（':0'）
：