Javascript 如何在Plotly Dash中注册鼠标点击和拖动事件？

我已在Dash中重新创建

这是链接中图表的gif。

当用户将鼠标悬停在图形上时，数据由一个回调动态更新，该回调侦听

dcc.Graph

组件的

hoverData

属性

我还添加了一个禁用/启用更新的回调。现在，它是通过单击图形区域触发的，即

clickData

属性中的更改

然而，我觉得这不是很直观。 我想在用户按住鼠标左键并拖动鼠标时启用悬停更新，并在释放鼠标时禁用悬停更新

---

如何实现此功能？

查看以下实现，未参考api，因此可能有更好的实现方法：

,

vis.add（光伏板）
.事件（“全部”）
.event（“mousedown”，function（）{
isMousedown=真；
})
.event（“mouseup”，function（）{
isMousedown=错误；
})
.event（“mousemove”，function（）{
如果（isMousedown）{
idx=x.invert（vis.mouse（）.x）>>0；
更新（）；
}
});

var数据=[]，
fy=功能（d）{
退换货价格
}，//y轴值
fx=功能（d）{
返回d.index
}，//x轴值
ft=函数（）{
返回数据[this.parent.index].ticker
}，//标签
w=730，
h=360，
S=pv.max（pv.Value（存量）、函数{
返回s.values.length
}),
idx=数学楼层（S/2）-1，
x=pv.刻度线性（0，S-1）。范围（0，w），
y=pv.刻度线性（-1,5）.范围（0,h），
重新缩放=真；
/*根据索引点规范化数据*/
var indexify=函数（数据、cols、idx）{
返回cols.map（函数（c）{
var v=数据[c]。值[idx]；
返回{
股票代码：c，
值：数据[c].values.map（函数（d，i）{
返回{
索引:i,，
价格：（（d-v）/v）
};
})
}
});
};
/*计算新的索引值，根据需要重新缩放，然后渲染*/
var update=函数（）{
数据=指数（股票、名称、idx）；
如果（重新缩放）{
var min=pv.min（数据映射）函数（d）{
返回pv.min（d.值，fy）
}));
var max=pv.max（数据映射（函数d）{
返回pv.max（d.值，fy）
}));
}
y、 域（最小，最大）.nice（）；
vis.render（）；
}
/*可视化面板。存储活动索引*/
var vis=新光伏板（）
.def（“i”，-1）
.左（60）
.右（70）
.顶部（20.5）
.底部（18）
.宽度（w）
.高度（h）；
/*显示百分比变化的水平网格线*/
可视添加（pv.规则）
.数据（函数（）{
返回y.ticks（8）
})
.底部（y）
.冲程方式（功能（d）{
返回d==0？“黑色”：“#CCCC”
})
.锚（“左”）.添加（pv.标签）
.文本（功能（d）{
返回值（d*100）.toFixed（0）+“%
});
/*Y轴标签*/
可视添加（pv.标签）
.数据（[“损益系数”]）
。左（-45）
.底部（h/2）
.font（“10pt Arial”）
.textAlign（“中心”）
.textAngle（-Math.PI/2）；
/*库存线*/
可视添加（光伏板）
.数据（函数（）{
返回数据
})
.添加（pv.行）
.数据（功能（d）{
返回d值
})
.左（x.by（fx））
.底部（y.y（fy））
.线宽（2）
.添加（pv.标签）
.visible（函数（）{
返回this.index==S-1
})
.textBaseline（“中间”）
.text页边距（6）
.文本（ft）；
/*当前索引行*/
可视添加（pv.规则）
.visible（函数（）{
返回idx>=0&&idx！=vis.i（）
})
.left（函数（）{
返回x（idx）
})
.top（-4）
.bottom（-4）
.strokeStyle（“红色”）
.锚（“底部”）.添加（pv.标签）
.text（函数（）{
返回股票.日期.值[idx]
});
/*捕捉事件的不可见条（不闪烁）*/
var isMousedown=错误；
可视添加（光伏板）
.事件（“全部”）
.event（“mousedown”，function（）{
isMousedown=真；
})
.event（“mouseup”，function（）{
isMousedown=错误；
})
.event（“mousemove”，function（）{
如果（isMousedown）{
idx=x.invert（vis.mouse（）.x）>>0；
更新（）；
}
});
更新（）
#图{
宽度：860px；
高度：400px；
}

到目前为止你都尝试了什么？老实说，我不知道该尝试什么。根据，没有存储拖动事件的
dcc.Graph
属性。我怀疑我需要编写自定义JS，但我不确定。谢谢！唯一的问题是，您使用的代码不是来自我的图表-现在我只需要找出如何将其嵌入Plotly。