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>