2017-10-16 15 views
1

J'utilise plotly.js et jquery.Planant sur l'intrigue dans l'intrigue et ayant quelques images apparaissent

Je voudrais avoir un effet de survol personnalisé avec les images. J'ai vu the answer par Etpinard (here est l'aspect et la sensation). Mais je pense que j'ai besoin d'une solution différente.

Ce que je ne veux pas, c'est de travailler avec l'iframe, alors que la solution mentionnée fonctionne avec. Au lieu de cela, je veux me connecter à $("path.point") et y ajouter une fonction de survol.

J'ai étudié ce qui se trouve à l'intérieur du tracé. Donc, voici mon code 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> 

Et voici ce que je vois à l'intérieur:

enter image description here

enter image description here

J'ai essayé de créer un code, qui pourrait démontrer le caractère image 'sur le vol stationnaire, mais cela n'a pas fonctionné. J'ai donc essayé la chose du journal:

$(document.getElementById('myDiv')).ready(function() { 
    $("path.point").hover(function() { 
     console.log("SUCCESS!"); 
    }, function() {}) 
}); 

Et cela ne montre rien. Donc je suppose que je m'adresse à l'objet (le point de chemin de Plotly) d'une mauvaise façon.

Juste au cas où, voici le code pour l'apparence de l'image:

$(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]; 
}); 

C'est le code de that answer.

+0

Y at-il raison de ne pas utiliser les hoverevents de Plotly? –

Répondre

2

Vous pouvez utiliser le hoverevents de Plotly sans avoir besoin de jQuery. Les données d'événement sont utilisées pour afficher une image basée sur l'index de la trace (curveNumber dans le code ci-dessous).

var trace1 = { 
 
    x: [1, 2, 3, 4, 5], 
 
    y: [1, 6, 3, 6, 1], 
 
    mode: 'markers', 
 
    type: 'scatter', 
 
}; 
 

 
var trace2 = { 
 
    x: [1.5, 2.5, 3.5, 4.5, 5.5], 
 
    y: [4, 1, 7, 1, 4], 
 
    mode: 'markers', 
 
    type: 'scatter', 
 
}; 
 

 
var data = [trace1, trace2]; 
 
images = ['data:image/jpeg;base64,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', 
 
    'data:image/jpeg;base64,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'] 
 
Plotly.newPlot('myDiv', data, { 
 
    hovermode: 'closest' 
 
}); 
 

 

 
document.getElementById('myDiv').on('plotly_hover', function(data) { 
 
    console.log(data.points[0].curveNumber); 
 
    document.getElementById('image').innerHTML="<img src='" + images[data.points[0].curveNumber] + "' />"; 
 
});
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 

 
<div id="myDiv"></div> 
 
<div id='image'></div>

+1

Je pensais que cela ne fonctionnait qu'avec les données de texte. D'une manière ou d'une autre, je pensais que c'était ce hover apparaissant juste au-dessus du point. Je vous remercie! –

+0

Je suppose que jQuery serait toujours utile, si je voudrais faire une image en vol stationnaire juste au-dessus de la dispersion. Je vais probablement expérimenter plus avec les classes etc et l'ajouter à la q/a dans le futur. –

+0

Jetez un oeil à D3, la bibliothèque sur laquelle est construit Plotly. J'ai son propre langage de sélection et il est plus facile de manipuler les graphes de Plotly. –