在 div 中绘制 js 响应图

Posted 2023-02-22

【中文标题】在 div 中绘制 js 响应图

【英文标题】：Plotly js responsive graph in div

【发布时间】：2017-03-28 11:01:58

【问题描述】：

我正在使用一个简单的 css 类创建一个动态创建的 div 的页面，这些 div 在鼠标悬停时调整大小。我使用它是为了在加载页面时这些 div 很小，然后如果用户想要仔细查看，他们只需将鼠标悬停在上面。

CSS 基本上是这样的

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


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

我正在尝试使我在此 div 中使用 Plotly.js 创建的绘图在用户鼠标悬停时自动调整大小。

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# 代码隐藏中动态创建的。

我发现了一个似乎与Here 相关的 q/a，但老实说，我不确定它如何应用于我的代码。

【参考方案1】：

看看 plotly 的 resize 函数。

下面 sn-p 中的图表在悬停时随机调整大小。希望您能轻松修改以供您使用。

(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>

【讨论】：

谢谢，我认为这是正确的答案，我现在可以重新编写我的代码，因为我解决了这个问题：var update = width: divWidth, height: divHeight ; Plotly.relayout(chartDivId,update);

这对我来说已经很接近了。它不像 CSS 过渡那样平滑，但现在还可以。我真正做的唯一改变是不要重新选择 gd，因为我们已经在上面做了。似乎有效，但这是一个错误吗？我的另一个后续问题是当我的鼠标移开时是否有“plotly_hover_off”或我可以使用的东西。无论哪种方式，这都是我迄今为止找到的最佳解决方案！

@Guernica88：您正在寻找plotly_unhover，我添加了另一个使用此事件的示例。如果要防止闪烁，请存储最后一个事件的时间，一旦触发事件，检查最后一个事件是否至少在 #n 秒前，如果不是，则在实际调整大小之前离开函数。

【参考方案2】：

当添加样式属性resize:both; overflow: auto 时，可以调整div 的大小。 由于 plotly 似乎只对窗口调整大小作出反应，当通过配置 responsive: true 时，可以在 div 调整大小时触发这样的窗口调整大小。 https://***.com/a/44807059/11769765 中解释了 div 大小调整的检测。放在一起 (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>

【参考方案3】：

根据resize， responsive 作为配置传递：

var config = responsive: true

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

【讨论】：

此属性仅用于调整窗口大小。