Buenas tardes!
Soy nueva usando JavaScript por lo que espero puedan ayudarme con mi problema.
Realice una gráfica en 3D usando plotly.js y agregue un controlador que modifica unos de los parámetros de la función con dat.gui, el problema es que al modificar el parámetro me hace una nueva gráfica encimada a la anterior, por lo que me gustaría saber como hacer para que las gráficas se vayan reemplazando y no encimando.
Muchas gracias!!!
(Adjunto el código)
<head>
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
<script src="dat.gui.js"></script>
</head>
<body>
<div id='myDiv'></div>
<script >
var button_layer_1_height = 1.2
var button_layer_2_height = 1.1
var annotation_offset = 0.04
// custom global variables
var gui, gui_G;
//Variables usadas para la ecuación
var G= 0.1,
var zPts = [];
var xPts = [];
var yPts = [];
//Configurando la interfaz gráfica de usuario
gui = new dat.GUI();
parameters =
{
preset1: function() { preset01(); },
};
// GUI -- parameters
var gui_parameters = gui.addFolder('Parameters');
G = 0.1;
gui_G = gui_parameters.add( this, 'G' ).name('G = ');
gui_G.onChange( createGraph() );
gui_G.setValue(1);
preset01();
function createGraph()
{
for(x=-3; x<=3; x+= 0.01) {
let zdat = [];
let ydat = [];
let xdat = [];
for (y=0; y<=0.5; y+=0.01) {
zdat.push( 2*0.125*[Math.sqrt(2/ (Math.PI* (this.G**2 + (y**2 / this.G**2)))) * Math.exp(-2*((x**2)+0.25) / [this.G**2 + (y**2/this.G**2)])] * [Math.cosh(2*x/(this.G**2 + (y**2/this.G**2))) + Math.cos( (2*x*y) / this.G**4 + y**2)]);
ydat.push(y);
xdat.push(x);
}
zPts.push(zdat);
yPts.push(ydat);
xPts.push(xdat);
}
var data = [{
z: zPts,
x: xPts,
y: yPts,
type: 'surface',
colorscale:'Jet',
contours: {
z: {
show:true,
usecolormap: true,
highlightcolor:"#42f462",
project:{z: true}
}
}
}];
Plotly.newPlot('myDiv', data, layout);
}
var updatemenus=[
{
buttons: [
{
args: ['type', 'surface'],
label: '3D Surface',
method: 'restyle'
},
{
args: ['type', 'contour'],
label:'Contour',
method:'restyle'
}
],
direction: 'left',
pad: {'r': 10, 't': 10},
showactive: true,
type: 'buttons',
x: 0.15,
xanchor: 'left',
y: button_layer_2_height,
yanchor: 'top'
},
{
buttons: [
{
args: ['colorscale', 'Viridis'],
label: 'Viridis',
method: 'restyle'
},
{
args: ['colorscale', 'Electric'],
label:'Electric',
method:'restyle'
},
{
args: ['colorscale', 'Earth'],
label:'Earth',
method:'restyle'
},
{
args: ['colorscale', 'Hot'],
label:'Hot',
method:'restyle'
},
{
args: ['colorscale', 'Portland'],
label:'Portland',
method:'restyle'
},
{
args: ['colorscale', 'Blackbody'],
label:'Blackbody',
method:'restyle'
},
],
direction: 'left',
pad: {'r': 10, 't': 10},
showactive: true,
type: 'buttons',
x: 0.15,
xanchor: 'left',
y: button_layer_1_height,
yanchor: 'top'
},
]
var annotations = [
{
text: 'Trace type:',
x: 0,
y: button_layer_2_height - annotation_offset,
yref: 'paper',
align: 'left',
showarrow: false
},
{
text: 'Colorscale:',
x: 0,
y: button_layer_1_height - annotation_offset,
yref: 'paper',
align: 'left',
showarrow: false
},
]
var layout = {
autosize: false,
width: 1300,
height: 600,
margin: {t: 130, b: 0, l: 0, r: 0},
updatemenus: updatemenus,
annotations: annotations,
scene: {
xaxis:{
gridcolor: 'rgb(255, 255, 255)',
zerolinecolor: 'rgb(255, 255, 255)',
showbackground: true,
backgroundcolor:'rgb(230, 230,230)'
},
yaxis: {
gridcolor: 'rgb(255, 255, 255)',
zerolinecolor: 'rgb(255, 255, 255)',
showbackground: true,
backgroundcolor: 'rgb(230, 230, 230)'
},
zaxis: {
gridcolor: 'rgb(255, 255, 255)',
zerolinecolor: 'rgb(255, 255, 255)',
showbackground: true,
backgroundcolor: 'rgb(230, 230,230)'
},
aspectratio: {x: 1, y: 1, z: 0.7},
aspectmode: 'manual'
}
};
function render()
{
renderer.render( scene);
}
</script>
</body>
(No se puede continuar esta discusión porque tiene más de dos meses de antigüedad. Si tienes dudas parecidas, abre un nuevo hilo.)