div에서 Plotly js 반응 그래프

Question

간단한 CSS 클래스를 사용하여 mouseover에서 크기를 조정하는 동적으로 생성 된 div로 페이지를 만들고 있습니다. 페이지를로드 할 때이 div가 작아서 사용자가 더 자세히 보길 원하면 마우스를 사용합니다. 나는 사용자가 이상 마이스 자동으로 크기를 조정 DIV이에 Plotly.js로 작성한 플롯을 만들려고 노력하고이

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

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

처럼

CSS는 기본적으로 보인다. 나는이 일을하기 위해 무엇을해야하는지 모르겠어요 곳

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 파일을 기반으로 모든 페이지가 동적으로 생성됩니다.

내가 관련성이있는 것처럼 보인 q/a가 발견되었지만 솔직히 말해서 내 코드에 어떻게 적용될지는 모르겠다.

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>