关于javascript：div中的js响应图


Plotly js responsive graph in div

我正在使用动态创建的div创建页面，该div使用简单的CSS类在鼠标悬停时调整大小。 我使用它，以便在加载页面时这些div很小，然后，如果用户希望近距离浏览，则只需将鼠标悬停在上面。

CSS基本上看起来像这样

1
2
3
4
5
6
7
8
9
10
.resize {
    width: 400px;
    height: 300px;
    transition: all 1s;
}

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

我正在尝试使我在该div中使用Plotly.js创建的图随着用户鼠标移过而自动调整大小。

JS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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＃代码隐藏的方式动态创建的。

我在这里找到了一个似乎无关紧要的问题，但老实说，我不确定它可能如何应用于我的代码。

看看plotly的resize函数。

下方代码段中的图形在悬停时会随机调整大小。 希望您可以轻松对其进行修改以供使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
(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);;
  });


})();
1
<script src="https://cdn.plot.ly/plotly-latest.min.js">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
(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);;
  });


})();
1
<script src="https://cdn.plot.ly/plotly-1.2.0.min.js">

相关讨论