plotly / plotly/react-plotly.js

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

Aperta
#154 1 commento 2 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Lingua principale
JavaScript
Stelle
1.1k
Fork
138
Merge medio
3g 2h
PR unite (30g)
4

Descrizione

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

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia riproducendo il componente Graphs con react-plotly.js 2.3.0, plotly.js 1.45.3, React 16.8 e i dati importati da 3d-graph.json. Verifica come vengono gestiti il surface trace e il scene layout, quindi verifica che il grafico 3D venga visualizzato senza errori.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript, react
Ambito
data-visualization, frontend
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Da chiarire
Idoneità per principianti
25/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.