响应式联合 js 图
Responsive joint js diagram
我使用联合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("▼");
$('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事件:
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 轴设置最大比例。当然,您可以根据需要对其进行调整或设置条件。
希望对我有帮助!
相关文章:
- 预期响应包含一个对象,但在angular js中得到一个数组错误
- 如何在 D3 中使力布局图.js响应屏幕/浏览器大小
- 从 Zend 控制器传递值并在 JS 响应中获取它
- 使JS响应屏幕宽度
- HTML、CSS、JS响应下拉菜单
- 在 Rails 中,我可以在 JS 响应后在控制器操作中执行 ActionMailer 逻辑吗?
- skrollr.js响应能力
- 清除 JS 响应
- 如何在 Rails 中的 ajax 调用中的 js 响应中包含 html 标记
- 如何在angular中解析mongodb数据的node-js响应
- 如何在node.js响应中添加跨域标头
- 如何在node.js响应中过滤mysql的结果
- js响应性不工作在小屏幕上
- 如何使用带有JS响应的布局?
- 用meteor.js响应式调用js函数/事件
- 头:ok对一个:js响应有效
- Rails,js响应,只是一个通知
- Angular JS响应Javascript所做的更改
- 在快速.js响应模块的基础上进行扩展
- 通过XHR流式传输Node.js响应到客户端