使用 dat.gui 修改函数的参数并修改其图形

编程问答 2022-05-15

问题描述

晚上好！

我使用 plotly.js 制作了一个 3D 函数图，并使用 dat.gui 添加了一个控制器，该控制器修改了函数的参数之一。问题是，当修改参数时，它在前一个函数上绘制了一个新函数，所以我想知道如何做到这些图形被替换而不重叠。

我希望你能帮助我，我是 JavaScript 新手，我很迷茫。

非常感谢！！

我附上代码：

<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',{
                args: ['colorscale','Electric'],label:'Electric',method:'restyle'
            },'Earth'],label:'Earth','Hot'],label:'Hot','Portland'],label:'Portland','Blackbody'],label:'Blackbody',],y: button_layer_1_height,]
var annotations = [
    {
      text: 'Trace type:',x: 0,y: button_layer_2_height - annotation_offset,yref: 'paper',align: 'left',showarrow: false
    },{
      text: 'Colorscale:',y: button_layer_1_height - annotation_offset,]

  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,showbackground: true,backgroundcolor:'rgb(230,230,230)'
        },yaxis: {
            gridcolor: 'rgb(255,backgroundcolor: 'rgb(230,zaxis: {
            gridcolor: 'rgb(255,aspectratio: {x: 1,y: 1,z: 0.7},aspectmode: 'manual'
  }
  };
  
  function render() 
{
    renderer.render( scene);
  
}
      


</script>
</body>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

3ddat.guifunctionfunctionfunctiongraphgraphgraphplotly.js