标签: jointjs
新手:你好使用jointjs的世界
您好我试图使用JointJS库执行Hello world应用程序,如下所示:http: //www.jointjs.com/tutorial#hello-world 我已经下载了joint.js和joint.css文件我已经复制了HelloWorld教程中给出的代码在html文件中并从firefox浏览器(26.0)访问它但它没有按预期工作并在教程中显示.预计:应该有两个带链接的盒子.实际:浏览器上没有任何内容.Ater调试错误是:"NS_ERROR_FAILURE:"在joint.js中:
var bbox = this.el.getBBox();
代码是:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="joint.css" />
<script src="joint.js"></script>
</head>
<body>
<script type="text/javascript">
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: 600,
height: 200,
model: graph
});
var rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 },
attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } …推荐指数
解决办法
查看次数
在JointJS中自动换行
我正在研究JointJS.我有各种带文字的元素.但是元素的宽度随着文本的增加而增加.我想动态设置元素的大小,使得盒子可以达到最大高度和宽度,并通过文本换行相应地扩展.如果文本os无法放入最大高度和宽度元素,则可以动态减少fontsize.
我试过style="word-wrap: break-word;"在我的div id中使用.但是没有效果.
<div id="myholder" style="word-wrap: break-word;"> </div>
我的持有人在JS文件中定义如下:
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: 1200,
height: 700,
model: graph
});
我可以遵循什么策略？
推荐指数
解决办法
查看次数
使用JointJS检测悬停
我正在使用JointJS API绘制一个内部带有嵌入路径的矩形.
这个路径作为一个按钮,我想只有当矩形悬停时才能看到这个按钮,但我无法想象如何使用JointJS检测悬停在父元素上...是否有任何编程方式来检测它？谢谢.
推荐指数
解决办法
查看次数
隐藏图中的元素
我有一个只读图来显示一些数据.我的最终用户希望"过滤"数据,以便一次只能显示一部分数据.我意识到每次应用过滤器时都可以重绘整个图表,省略了不显示的元素,但我想知道是否有一种方法可以简单地"隐藏"一些现有元素,然后重新显示他们.
为了尝试清楚,如果这是一个网页而不是图表,我会画出将CSS display: none应用于我选择的元素的类比.
推荐指数
解决办法
查看次数
在jointjs中调整单元格上的单元格大小
我有一个jointjs演示代码,它在纸上有基本形状,我想增加形状的大小,或突出指针上的形状点击或光标在形状上移动,
示例演示代码在这里
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 650,
height: 400,
gridSize: 20,
model: graph
});
var rb = new joint.shapes.basic.Rect({
position: { x: 50, y: 50 },
size: { width: 100, height: 40 },
attrs: { text: { text: 'basic.Rect' } }
});
graph.addCell(rb);
var tb = new joint.shapes.basic.Text({
position: { x: 170, y: 50 },
size: { width: 100, height: 30 },
attrs: { text: { text: 'basic.Text' } }
}); …推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
如何将JointJS与使用Angular CLI构建的应用程序一起使用？
我已经通过npm安装了jointjs,并且还安装了typings和代码编译/构建.
码
import { Component } from '@angular/core';
import * as joint from '../../node_modules/jointjs/dist/joint.min';
export class AppComponent {
title = 'app works!';
constructor(
) {
// console.log(joint)// private jint: joint,
}
ngOnInit() {
var graph = new joint.dia.Graph;
}
}
浏览器上显示错误:
Failed to compile.
/home/vinay/angularapps/jjs/src/app/app.component.ts (17,31): Property 'Graph' does not exist on type '{}'.)
我的cli.json文件..为jointjs添加了脚本和样式
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"version": "1.0.0-beta.32.3",
"name": "jjs"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": …推荐指数
解决办法
查看次数
响应式联合js图
我使用联合 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,
});
但它不起作用......我可以应用任何想法或方法？
提前致谢。
推荐指数
解决办法
查看次数
Jointjs位置文字在顶部，而不是矩形的中心
在JointJS中，如何将标签放在顶部而不是中心。像这样的东西：
因此在编码中：
var r1 = new joint.shapes.basic.Rect({
position: { x: 20, y: 20 },
size: { width: 200, height: 200 },
attrs: { rect: { fill: '#E74C3C' }, text: { text: 'Parent' } } // I want to position text on top.
});
推荐指数
解决办法
查看次数
如何在 reactjs 中使用jointjs？
我想将jointjs 库与reactjs 一起使用。是否有任何可用的库或包装器可以使用？如果不可用，那么最简单的使用方法是什么。
推荐指数
解决办法
查看次数
在纸上取消突出显示所有 cellViews - jointjs
我们最近添加了 Jointjs 的突出显示功能，以向用户显示当前突出显示和选择的单元格视图。但是，如果用户点击外面，我们想要取消突出显示在纸上绘制的所有 cellView(s)。在调查了官方文档后，我们最终无法找到满足我们要求的解决方案。
突出显示 cellView(s) 的代码是：
this.paper.on('cell:pointerclick', (cellView: any) => {
cellView.highlight();
});
推荐指数
解决办法
查看次数
JointJS - 鼠标单击事件触发单元格位置更改事件
我需要为每个单元格定义鼠标单击事件.我用cell:pointerup事件; 但是当我改变细胞位置时会触发此事件.我如何区分这两个事件？
提前致谢.
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
标签 统计
jointjs ×13
javascript ×6
angular ×1
angular-cli ×1
dia ×1
hover ×1
jquery-svg ×1
rappid ×1
reactjs ×1
responsive ×1
svg ×1
word-wrap ×1