plotly / plotly/react-plotly.js

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

Aberta
#154 1 comentário 2 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Linguagem predominante
JavaScript
Estrelas
1.1k
Forks
138
Merge médio
3d 2h
PRs com merge (30d)
4

Descrição

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

Guia de contribuição

Nenhum guia de contribuição indexado para este repositório

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Direção de pesquisa

Comece reproduzindo o componente Graphs com react-plotly.js 2.3.0, plotly.js 1.45.3, React 16.8 e os dados importados de 3d-graph.json. Verifique como o surface trace e o scene layout são tratados e, em seguida, confirme que o gráfico 3D é renderizado visivelmente sem erros.

Escrita pelo modelo de indexação a partir do texto da issue.

Avaliação

Stack de tecnologia
javascript, react
Domínio
data-visualization, frontend
Tipo de issue
Bug
Dificuldade
4/5
Tempo estimado
3-5 dias
Status de atividade
Estagnada
Clareza
Precisa de esclarecimento
Facilidade para iniciantes
25/100

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.