Plyly JS отзывчивый граф в DIV

Question

Я делаю страницу с динамически создаваемыми div, которые изменяют размер при наведении курсора, используя простой класс CSS. Я использую его так, чтобы эти 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); });

        })();
    }
}

Закомментированный код показывает, где я не уверен, что мне нужно сделать, чтобы это работало. Пока что все, что я делал, ни к чему не привело.

Все на странице динамически создается в коде C# на основе текстовых файлов, созданных моими пользователями.

Здесь я нашел a 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>

Answer 2

А div можно изменить размер при добавлении свойств стиля resize:both; overflow: auto. Поскольку plotly, кажется, реагирует только на изменение размера окна, когда конфигурация responsive: trueпередается, можно вызвать такое изменение размера окна при изменении размера div. Обнаружение изменения размера div объясняется в /questions/23285061/kak-obnaruzhit-sobyitiya-izmeneniya-razmera-css3/23285081#23285081 . Собираем все вместе ( https://jsfiddle.net/3cvnua0q/)

      <html>
<head>
  <script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>

<div id='myDiv' style="resize:both; overflow: auto; border: 1px solid; height:250px">
</div>

<script>

let observer = new MutationObserver(function(mutations) {
  window.dispatchEvent(new Event('resize'));
});

let child = document.getElementById('myDiv');
observer.observe(child, {attributes: true})

var trace1 = {
  type: 'bar',
  x: [1, 2, 3, 4],
  y: [5, 10, 2, 8],
}

var data = [trace1]
var layout = {
  margin: {l: 20, r: 10, b: 20, t: 10}
}
var config = {responsive: true}

Plotly.newPlot('myDiv', data, layout, config);
</script>

</body>
</html>

Answer 3

По изменению размера , responsive передается как конфигурация:

      var config = {responsive: true}

Plotly.newPlot('myDiv', data, layout, config );