[ Foro de Javascript ]

Modificar un parámetro de una función con dat.gui y que se modifique su gráfica.

03-Apr-2021 20:58
Invitado (Ayelen)
0 Respuestas

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>




Si ya eres usuario del sistema, puedes contestar desde tu cuenta y así ganar prestigio.

Si sólo eres un visitante, puedes optar por...