响应式联合js图答案

【问题标题】：Responsive joint js diagram响应式联合js图
【发布时间】：2016-07-08 16:15:48
【问题描述】：

我正在使用联合 js 库在 html 中创建图表，但我需要它像 mi 站点一样响应。事情是，我将它放在一个带有 java 类的 div 中，该类打开并用这段代码关闭：

$('.open-down-up').click(function(){
  var nameMore = $(this).attr("name");
  var valMore = $(this).attr("value");
  if(valMore == 0){
      $(this).find('span').empty();
      $(this).find('span').append("&#9660;");
      $('div[id='+nameMore+']').slideDown("normal");
      $(this).attr("value","1");
  }else if(valMore == 1){
      $(this).find('span').empty();
      $(this).find('span').append("&#9658;");
      var n = nameMore.indexOf("process_process");
      $('div[id='+nameMore+']').slideUp("normal", function(){
          var n = nameMore.indexOf("process_process");
          if(n > -1){
              hide_panel_all();
          }
      });
      $(this).attr("value","0");
  }
});

所以，我已经尝试过类似的方法：

var graph = new joint.dia.Graph;

var paper = new joint.dia.Paper({
 el: $('#modelCanvas'),
 gridSize: 10,
 height: $('#modelCanvas').height(),
 width: $('#modelCanvas').width(),
 gridSize: 1,
 model: graph,
});

但它不起作用......我可以应用任何想法或方法吗？？

提前致谢。

【问题讨论】：

你试过stackoverflow.com/questions/29029390/…的解决方案吗？
@WilfEngel 是的，但也没有用

标签： javascript responsive jointjs

【解决方案1】：

我找到了一种方法，因此它可能对需要它的人有所帮助（用于调整大小响应）：

需要随着窗口一起缩放整张纸，所以，我们在上面创建一个 javascript 事件：

window.onresize = function(event) {
        paper.setDimensions($('#your_div_id').width());
        paper.scaleContentToFit({minScaleX: 0.3, minScaleY: 0.3, maxScaleX: 1 , maxScaleY: 1});

};

使用联合 js 属性来调整画布的大小以及基于该事件的 div，但仅影响宽度，然后为 X 和 Y 轴设置最大比例。当然，您可以根据需要调整它的 make 条件。

希望对我有帮助！

【讨论】：