2017-08-16 3 views
1

Ich benutze JavaScript, um 3D-Streudiagramme in Plotly zu erzeugen. Anfangs spezifiziere ich die Achsenbereiche nicht. Ich möchte jedoch den Benutzer den Zaxis-Bereich manuell festlegen lassen, nachdem die Plots ursprünglich gezeichnet wurden. In dieser Benutzerinteraktion möchte ich die Bereichswerte mit vorhandenen (wie gezeichnet) Einstellungen auffüllen. Wie extrahiere ich den Zaxis-Bereich aus einem bestehenden Plotly scatter3d-Chart?Get zaxis Bereich von Plotly 3D

Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv', function(err, rows) { 
 
    function unpack(rows, key) { 
 
    return rows.map(function(row) { 
 
     return row[key]; 
 
    }); 
 
    } 
 

 
    
 
    var data = []; 
 
    
 
    for (i = 0; i < 24; i += 1) { 
 

 
    var x_row = [], 
 
     y_row = [], 
 
     z_row = unpack(rows, i); 
 
    
 
    for (var j = 0; j < z_row.length; j++) { 
 
     x_row.push(i); 
 
     y_row.push(j); 
 
    } 
 
    
 
    data.push({ 
 
     x: x_row, 
 
     y: y_row, 
 
     z: z_row, 
 
     mode: 'lines', 
 
     line: { 
 
     color: '#FF00FF' 
 
     }, 
 
     type: 'scatter3d' 
 
    }); 
 
    } 
 
    
 
    Plotly.newPlot('myDiv', data); 
 

 
    document.getElementById('cmax').innerHTML = 'Max: ' + data[0].cmax; 
 
    document.getElementById('cmin').innerHTML = 'Min: ' + data[0].cmin; 
 
});
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 
<div id='cmax'></div> 
 
<div id='cmin'></div> 
 
<div id="myDiv"></div>

Antwort

1

Wie im Kommentar angegeben es ein scatter3D Plot ist, arbeitet die Lösung unten Plots 3D-Oberfläche. Für Scatter3D-Plots Plotly berechnet die Achsenbereiche basierend auf dem Min- und Max-Wert des Eingabearrays.

sceneBounds[0][i] = Math.min(sceneBounds[0][i], objBounds[0][i]/dataScale[i]); 

Von dort können Sie Ihre Bereiche manuell auf die Min-/Max-Werte (+ etwas mehr Raum) gesetzt oder die Bereiche leer lassen und Ihre Standardwerte mit dem max bzw. auffüllen. minimale Werte.


Plotly setzt den die Maximal- und Minimalwert zu cmax resp. cmin des Datenobjekts, das an die newPlot-Funktion übergeben wird.

Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv', function(err, rows) { 
 
    function unpack(rows, key) { 
 
    return rows.map(function(row) { 
 
     return row[key]; 
 
    }); 
 
    } 
 

 
    var z_data = [] 
 
    for (i = 0; i < 24; i += 1) { 
 
    z_data.push(unpack(rows, i)); 
 
    } 
 

 
    var data = [{ 
 
    z: z_data, 
 
    type: 'surface' 
 
    }]; 
 
    
 
    Plotly.newPlot('myDiv', data); 
 
    
 
    document.getElementById('cmax').innerHTML = 'Max: ' + data[0].cmax; 
 
    document.getElementById('cmin').innerHTML = 'Min: ' + data[0].cmin; 
 
});
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 
<div id='cmax'></div> 
 
<div id='cmin'></div> 
 
<div id="myDiv"></div>

+0

Vielen Dank für Ihre Antwort. Es scheint, dass ich eine entscheidende Information weggelassen habe. Der Diagrammtyp ist scatter3d. In diesem Fall werden cmax und cmin nicht zu den Daten [0] addiert. Ich werde meine Frage mit einem ähnlichen Beispiel aktualisieren. –

+0

@JimNorman: siehe aktualisierte Antwort, ich hoffe, die Antwort ist so einfach wie ich denke. –