Question

我使用联合js库在html中创建一个图表，但是我需要它作为mi site响应.Thing是，我把它放在一个带有java类的div里面打开并用这段代码关闭：< / p>

$('.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,
});

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

提前致谢。

Answer 1

I found a way so it may be helpfull for someone who need it (for a resizing responsive) :

It's necessary to scale the entire paper along with the window, so, we create a javascript event on it :

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

};

Using joint js properties whe resize the canvas along with the div based on that event but only affecting width, then set a max scale for X and Y axis. Yopu can of course, adapt it of make conditions on it as you may need.

Hope it helps as for me !

响应式联合js图

1 个答案: