Отзывчивая совместная js-диаграмма

Я использую совместную библиотеку js для создания диаграммы внутри html, но мне нужно, чтобы она реагировала, как mi site. Дело в том, что она находится внутри div с классом java, который открывается и закрывается с помощью этого кода:

$('.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("▼");
      $('div[id='+nameMore+']').slideDown("normal");
      $(this).attr("value","1");
  }else if(valMore == 1){
      $(this).find('span').empty();
      $(this).find('span').append("►");
      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,
});

Но это не работает ... любую идею или подход, который я могу применить ??

Заранее спасибо.


javascript responsive jointjs
person jsanchezs    schedule 08.07.2016    source источник
comment
Пробовали ли вы решения на stackoverflow.com/ вопросы/29029390/?   -  person Wilf Engel    schedule 11.07.2016
comment
@WilfEngel да, но тоже не сработало   -  person jsanchezs    schedule 11.07.2016

Ответы (1)


arrow_upward
6
arrow_downward

Я нашел способ, так что это может быть полезно для тех, кому это нужно (для изменения размера):

Необходимо масштабировать всю бумагу вместе с окном, поэтому создаем на ней 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. Yopu, конечно, может адаптировать его или создать условия, которые вам могут понадобиться.

Надеюсь, это поможет, как для меня!

person jsanchezs    schedule 11.07.2016