plotly / plotly/react-plotly.js
Can't react a 3d chart with react-plotly
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
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Ö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