plotly / plotly/react-plotly.js

Can't react a 3d chart with react-plotly

Offen
#154 1 Kommentar 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

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

Beschreibung

I am using "react-plotly.js": "^2.3.0", and plotly.js 1.45.3.
I am trying to recreate this graph in reactjs version 16.8.
But all the charts are 2d and i can't even see anything in the screen. (No errors there).

import React from 'react';
import Plot from 'react-plotly.js';
import graphData from '../../public/resources/3d-graph.json';

> class Graphs extends React.Component {
>     render(){
>       return(
>         <Plot
>             data={[
>             {
>                 type: 'surface',
>                 x: graphData.x,
>                 y: graphData.y,
>                 z: graphData.z
>             }
>             ]}
>             layout={
>                 {
>                     width: 800,
>                     height: 600,
>                     margin: {
>                         l: 50,
>                         r: 50,
>                         b: 80,
>                         t: 90,
>                         pad: 4
>                     },
>                     title: graphData.masterGraph.title,
>                     annotations: [{
>                         text: graphData.masterGraph.model,
>                           font: {
>                           size: 14,
>                           color: '#444444',
>                         },
>                         showarrow: false,
>                         align: 'center',
>                         x: 0.5,
>                         y: 1.1,
>                         xref: 'paper',
>                         yref: 'paper',
>                     }],
>                     scene: {
>                         xaxis: {
>                             title: graphData.masterGraph.xAxis,
>                             titlefont: {
>                               family: 'Courier New, monospace',
>                               size: 12,
>                               color: '#444444'
>                             }
>                         },
>                         yaxis: {
>                             title: graphData.masterGraph.yAxis,
>                             titlefont: {
>                               family: 'Courier New, monospace',
>                               size: 12,
>                               color: '#444444'
>                             }
>                         },
>                         zaxis: {
>                             title: graphData.masterGraph.zAxis,
>                             titlefont: {
>                               family: 'Courier New, monospace',
>                               size: 12,
>                               color: '#444444'
>                             }
>                         }
>                     }
>                 }
>             }
>         />
>       )
>     }
>   }
> 
> export default Graphs

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne damit, die Graphs-Komponente mit react-plotly.js 2.3.0, plotly.js 1.45.3, React 16.8 und den importierten 3d-graph.json-Daten nachzubilden. Prüfe, wie der surface-Trace und das scene-Layout behandelt werden, und verifiziere anschließend, dass das 3D-Diagramm ohne Fehler sichtbar gerendert wird.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, react
Bereich
data-visualization, frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

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