Ответственная диаграмма js

Question

Я использую совместную библиотеку js для создания диаграммы внутри html, но мне нужно, чтобы она была отзывчивой, как mi site.Thing есть, у меня есть внутри 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"); 
    } 
}); 

SO, я уже пробовал такие вещи, как:

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

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

Это необходимо масштабировать всю бумагу вместе с окном, поэтому мы создаем событий JavaScript на нем :

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

}; 

Использование совместных JS свойства Whe изменить размер холста вместе с DIV на основе этого события, но влияет только на ширину, а затем установить максимальную шкалу для X и Y оси. Конечно, Йопу может приспособить его к созданию условий на нем, как вам может понадобиться.

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