[Question] How to tell which point is clicked on when using onClick Event with multiple traces?

Offen
#165 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
25/100
Issue-Typ
Feature
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
javascript, react
Bereich
data-visualization, frontend

Rechercherichtung

Beginnen Sie mit der im Issue gezeigten Verwendung von createPlotComponent und dem onClick-Callback. Untersuchen Sie anschließend das event.points-Array und das für mehrere Traces erzeugte MouseEvent. Stellen Sie fest, ob die vorhandenen Event-Daten den ausgewählten Trace und Punkt identifizieren; abgeschlossen ist die Aufgabe, wenn eine zuverlässige Möglichkeit zur Unterscheidung des angeklickten Punkts dokumentiert oder bereitgestellt wurde.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

I have setup a react application where I am using createPlotComponent to create an instance of an graph that I can interact with and I am controlling it using react-chart-editor


constructor() {
    this.PlotComponent =  createPlotComponent(plotly)
}
<this.PlotComponent
         ...data ,frames etc
         onClick={(e) => {
         console.log(e)
  }}/>

The problem I am having is that when I have multiple traces on my graph, I want to determine which trace I am clicking. At the moment the event from onClick exposes the points (an array of all of the points clicked) and a MouseEvent which shows information about the point on the graph that is clicked. Is there any way to get specifically the information about the one point that is clicked on?

There might be a way to determine which point is clicked by using the mouse event and matching up the position of the mouse click on the graph with the position of the point on the graph. However, there doesn't seem to access the position of the points on the graph in terms of their coordinates

Vorherrschende Sprache
JavaScript
Sterne
1.1k
Forks
138
Ø Merge
3 T. 2 Std.
Gemergte PRs (30 T.)
4

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus plotly/react-plotly.js

Alle Issues in plotly/react-plotly.js

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.