divでプロットできる応答グラフ

Question

私は、単純なCSSクラスを使用してmouseoverでサイズを変更する動的に作成されたdivでページを作成しています。私はそれを使用して、ページがロードされたときにこれらのdivが小さくなり、ユーザーがマウスをより近く見たいと望む場合に使用します。

CSSは基本的に私はこの中でPlotly.jsで作成するプロットは、ユーザーがマウスオーバーとして自動的にサイズを変更DIV作るしようとしています。この

.resize { 
      width: 400px; 
      height: 300px; 
      transition: all 1s; 
     } 

    .resize:hover { 
       width: 800px; 
       height: 600px; 
     } 

のように見えます。私はこの仕事をするために何をする必要があるかわからないんだけど、どこ

JSコード

function doGraph(){ 
    for(index = 0; index < divArr.length; ++index){ 
     (function() { 
      var d3 = Plotly.d3; 

      var gd3 = d3.select("div[id='"+divArr[index]+"']"); 
       //.append('div') 
       //.style({ 
       // width: "95%", "margin-left": "2.5%", 

       // height: "95%", "margin-top": "2.5%" 
       //}); 

      var gd = gd3.node(); 

      Plotly.newPlot(gd, [{ 
       mode:'lines', 
       x: xArr[index], 
       y: yArr[index], }], 
         layout , {scrollZoom:true,modeBarButtonsToRemove:['sendDataToCloud'],showLink:false,displaylogo:false}); 

      //gd.onresize = function() { 
      // Plotly.Plots.resize(gd); 
      //}; 
      window.addEventListener('resize', function() { Plotly.Plots.relayout(gd); }); 

     })(); 
    } 
} 

コメントアウトコードが表示されます。今まで私がやったことはすべて何ももたらさなかった。

ユーザーが生成したtxtファイルに基づいて、ページ上のすべてがc＃コードビヘイビアで動的に作成されます。

関連性が高いと思われるq/aが見つかりましたが、正直言って私のコードにどのように適用されるか分かりません。

Answer 1

plotlyのresize機能を見てください。

以下のスニペットのグラフは、ホバーオーバー時にランダムにサイズ変更されます。私はあなたのためにそれを簡単に変更できることを願っています。

(function() { 
 
    var d3 = Plotly.d3; 
 

 
    var WIDTH_IN_PERCENT_OF_PARENT = 60, 
 
    HEIGHT_IN_PERCENT_OF_PARENT = 80; 
 

 
    var gd3 = d3.select('#myDiv') 
 
    .style({ 
 
     width: (Math.random() + Math.random()) * WIDTH_IN_PERCENT_OF_PARENT + '%', 
 
     'margin-left': (100 - WIDTH_IN_PERCENT_OF_PARENT)/2 + '%', 
 

 
     height: (Math.random() + Math.random()) * HEIGHT_IN_PERCENT_OF_PARENT + 'vh', 
 
     'margin-top': (100 - HEIGHT_IN_PERCENT_OF_PARENT)/2 + 'vh' 
 
    }); 
 

 
    var gd = gd3.node(); 
 

 
    a = Plotly.plot(gd, [{ 
 
    type: 'bar', 
 
    x: [1, 2, 3, 4], 
 
    y: [5, 10, 2, 8], 
 

 
    }], { 
 
    title: 'Random resize on hover', 
 
    font: { 
 
     size: 16 
 
    } 
 
    }); 
 

 
    document.getElementById("myDiv").on('plotly_hover', function(data) { 
 
    window.alert("I'm resizing now"); 
 
    gd3 = d3.select('#myDiv') 
 
     .style({ 
 
     width: (0.5 + Math.random() + Math.random()) * WIDTH_IN_PERCENT_OF_PARENT + '%', 
 
     height: (0.5 + Math.random() + Math.random()) * HEIGHT_IN_PERCENT_OF_PARENT + 'vh', 
 
     }); 
 
    gd = gd3.node() 
 
    Plotly.Plots.resize(gd);; 
 
    }); 
 

 

 
})();

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 
<div id='myDiv'></div>

---

(function() { 
 
    var d3 = Plotly.d3; 
 

 
    var WIDTH_IN_PERCENT_OF_PARENT = 60, 
 
    HEIGHT_IN_PERCENT_OF_PARENT = 80; 
 

 
    var gd3 = d3.select('#myDiv') 
 
    .style({ 
 
     width: WIDTH_IN_PERCENT_OF_PARENT + '%', 
 
     'margin-left': (100 - WIDTH_IN_PERCENT_OF_PARENT)/2 + '%', 
 

 
     height: HEIGHT_IN_PERCENT_OF_PARENT + 'vh', 
 
     'margin-top': (100 - HEIGHT_IN_PERCENT_OF_PARENT)/2 + 'vh' 
 
    }); 
 

 
    var gd = gd3.node(); 
 

 
    a = Plotly.plot(gd, [{ 
 
    type: 'bar', 
 
    x: [1, 2, 3, 4], 
 
    y: [5, 10, 2, 8], 
 

 
    }], { 
 
    title: 'Double on hover, normal on unhover', 
 
    font: { 
 
     size: 16 
 
    } 
 
    }); 
 

 
    document.getElementById("myDiv").on('plotly_hover', function(data) { 
 
    gd3.style({ 
 
     width: 2 * WIDTH_IN_PERCENT_OF_PARENT + '%', 
 
     height: 2 * HEIGHT_IN_PERCENT_OF_PARENT + 'vh', 
 
     }); 
 
    gd = gd3.node() 
 
    Plotly.Plots.resize(gd);; 
 
    }); 
 

 
    document.getElementById("myDiv").on('plotly_unhover', function(data) { 
 
    gd3.style({ 
 
     width: WIDTH_IN_PERCENT_OF_PARENT + '%', 
 
     height: HEIGHT_IN_PERCENT_OF_PARENT + 'vh', 
 
     }); 
 
    gd = gd3.node() 
 
    Plotly.Plots.resize(gd);; 
 
    }); 
 

 

 
})();

<script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script> 
 
<div id='myDiv'></div>