Plotly js div div

Question

我使用一個簡單的css類來製作一個動態創建div的頁面，它可以在mouseover上調整大小。我使用它，因此這些div在頁面加載時很小，如果用戶想要仔細觀察，他們只需將鼠標懸停在上面。

CSS基本上看起來像這樣

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

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

我試圖讓我在這跟Plotly.js創建爲用戶將鼠標移動DIV自動調整的情節。

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 Here，但說實話我不確定它是如何適用於我的代碼的。

Answer 1

看看情節的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>