How do I use Plotly.Fx.hover with react-plotly.js?
Personne n'a encore pris cette issue.
Évaluation
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Accessibilité débutants
- 25/100
- Type d'issue
- Fonctionnalité
- Clarté
- À clarifier
- Activité
- À l'abandon
- Stack technique
- javascript, plotly, react, typescript
- Domaine
- data-visualization, frontend
Piste de recherche
Commencez par l’exemple Plotly coupled-hover-events lié et le ref react-plotly.js affiché dans l’issue. Comparez le ref du wrapper avec le comportement Plotly.Fx.hover demandé ; le travail est terminé lorsqu’une manière prise en charge de reproduire l’interaction de hover couplée avec le composant affiché a été identifiée.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Description
I am building something like this: https://plotly.com/javascript/hover-events/#coupled-hover-events, but I can't find a way to reproduce this behavior with react-plotly.js
Fx is not present in plotly.js anymore (isn't it?), and I can't find a way to find a Plotly's Plot instance (not the wrapper's instance) in order to try different methods.
Does anyone know how I could achieve a similar effect?
What I have so far looks something like:
import {FC, useEffect, useMemo, useRef} from "react";
import {BoxPlotData, Layout} from 'plotly.js'
import Plot from 'react-plotly.js';
export const MyPlot: FC = () => {
const boxplotRef = useRef<Plot>(null)
useEffect(() => {
if (boxplotRef.current) {
// What now?
// I would like to do something like
// boxplotRef.current.plot.hover([ { pointNumber: 1 }, { pointNumber: 2 }, { pointNumber: 3 } ])
}
}, []);
const myLayout = useMemo((): Layout => { ... }, [])
const myData = useMemo((): Partial<BoxPlotData> => { ... }, [])
return (
<Plot
ref={boxplotRef}
data={myData}
layout={myLayout}
/>
)
}
- Langage dominant
- JavaScript
- Étoiles
- 1.1k
- Forks
- 138
- Métriques de merge des PR
- Aucune PR mergée en 30 j
Préparer son environnement
Ce projet ne fournit ni conteneur de développement, ni Dockerfile, ni guide de contribution : l'installation est à votre charge. Commencez par son README, et consultez notre guide de la première contribution pour les étapes générales.
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Autres issues de plotly/react-plotly.js
-
P3 plotly-internal size: 1 task
Difficulté 3/5 1-2 jours Accessibilité débutants 45/100
plotly/react-plotly.js#386 ·
-
Difficulté 4/5 3-5 jours Accessibilité débutants 48/100
plotly/react-plotly.js#358 · 1 commentaire ·
-
Difficulté 4/5 3-5 jours Accessibilité débutants 35/100
plotly/react-plotly.js#354 ·
-
Difficulté 3/5 1-2 jours Accessibilité débutants 30/100
plotly/react-plotly.js#353 · 1 commentaire ·
-
Difficulté 4/5 3-5 jours Accessibilité débutants 35/100
plotly/react-plotly.js#352 · 1 commentaire ·
Toutes les issues de plotly/react-plotly.js
Issues similaires
-
Difficulté 2/5 1-3 heures Accessibilité débutants 66/100
riverqueue/river#1576 ·
Les mainteneurs répondent en général sous 1 jour
-
documentation good first issue
Difficulté 1/5 Moins d'une heure Accessibilité débutants 72/100
Les mainteneurs répondent en général sous 1 jour
-
good first issue help wanted
Difficulté 1/5 Moins d'une heure Accessibilité débutants 88/100
modrollstudio/Modroll-Studio-Website#80 · 1 commentaire ·
Les mainteneurs répondent en général sous 1 jour
-
Add tests for CSV email parsingOuvertegood first issue help wanted
Difficulté 2/5 1-3 heures Accessibilité débutants 85/100
mafzalkalwardev/mailforge#21 ·
-
good first issue help wanted
Difficulté 1/5 Moins d'une heure Accessibilité débutants 82/100