私はplotly.jsとjqueryを使用しています。プロット上にプロット上をホバーしていくつかの画像が表示されます
画像にカスタムホバー効果を持たせたいと思います。私はthe answerをEtpinard(hereがルックアンドフィールである)と見ました。しかし、私は別の解決策が必要だと思います。
iframeで作業したくないのは、前述の解決策がそれに対応している間です。代わりに、私は$("path.point")
に接続し、そこにホバー機能を追加したいと思います。
私はプロット内の内容を調査しました。だから、ここに私のhtmlコードは次のとおりです。
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="myDiv"></div>
<script src="MakePlot.js"></script>
<script src="Mod2.js"></script>
</body>
そして、ここでは、私が内部の見たものである。
「表示されるでしょう、私はコードを作成しようとしました、ホバー上に「画像」が表示されましたが、機能しませんでした。だから私はログの事を試した:
$(document.getElementById('myDiv')).ready(function() {
$("path.point").hover(function() {
console.log("SUCCESS!");
}, function() {})
});
それは何も表示されません。だから私は間違った方法でオブジェクト(そのPlotlyのpath.pointもの)を扱っていると思います。
$(document.getElementById('myDiv')).ready(function() {
$(this).css({backgroundColor:"#00FFFFFF", color: "#00FFFFFF"}).prepend('<img src="2368518-ghost.jpg" alt="" />');},
function() {
$(this).css({backgroundColor: "#00FFFFFF", color: "#00FFFFFF"});
$('img', this).remove()[0];
});
that answerからのコードです:
念のため、ここでは画像の外観のためのコードです。
Plotlyのhovereventsを使用しない理由はありますか? –