我正在为一个项目寻找一个好的JavaScript Diagram库,可以是商业的.
强制性要求:
- 单击组件(或悬停)时突出显示连接的线和组件
- 能够切换组件的图像(表示一组组件)
- 放大/缩小功能
- 能够定义支持左侧右侧拖动的自定义行为
- 能够生成图表的可链接最小化地图
到目前为止,我检查了GoJs,JointJS和Draw2D,JointJS看起来最合适,但我不确定.文档和社区也很重要.因此,如果有人有这些图书馆或其他图书馆的经验,请告诉我您的经历.
帮助我使用我提到的功能为项目选择合适的库.
对于链接 - 在JointJS图中 - 我试图实现本教程(http://jointjs.com/tutorial/constraint-move-to-circle)来移动链接上的标签,但我不明白在哪里放了ConstraintElementView.
ConstraintElementView
var constraint = label; // ???
var ConstraintElementView = joint.dia.ElementView.extend({
pointerdown: function(evt, x, y) {
var position = this.model.get('position');
var size = this.model.get('size');
var center = g.rect(position.x, position.y, size.width, size.height).center();
var intersection = constraint.intersectionWithLineFromCenterToPoint(center);
joint.dia.ElementView.prototype.pointerdown.apply(this, [evt, intersection.x, intersection.y]);
},
pointermove: function(evt, x, y) {
var intersection = constraint.intersectionWithLineFromCenterToPoint(g.point(x, y));
joint.dia.ElementView.prototype.pointermove.apply(this, [evt, intersection.x, intersection.y]);
}
});
链接标签
paper.on({
/**
* Doubleclick on link: Add label for link
*/
'cell:pointerdblclick': function(cellView, …我在DAG中有一个joint.js元素,并希望能够通过单击它来触发事件.
我可以使用$(selector).click(...)它,但我想知道是否有一个joint.js特定的处理方式,因为这可能会更好.我决定的一个事件是onclick的候选人是'批处理:停止'
我的代码:
var variable = new joint.shapes.basic.Rect({
name : label,
id: label,
onclick : function () {alert("hello");},
size: { width: width, height: height },
attrs: {
text: { text: label, 'font-size': letterSize, 'font-family': 'monospace' },
rect: {
fill : fillColor,
width: width, height: height,
rx: 5, ry: 5,
stroke: '#555'
}
}
});
variable.on('batch:stop', function (element) {alert(""); toggleEvidence(element.name);});
return variable;
我应该如何添加onclick事件？
我正在使用jointjs制作用户可编辑的图表.用户可以拖动它们并重新定位每个单元格.但是,当一个单元格被拖到边缘时,它会溢出并被切断.我希望防止这种情况发生,相反,单元格在到达纸张边缘之前停止并且不允许越过边缘,因此总是完全保留在纸张内.这个行为可以在jointjs自己的演示中看到:
http://www.jointjs.com/tutorial/ports
尝试将单元格拖动到边缘,您将看到它最终在穿过纸张元素的边缘时变得隐藏.
其次,我使用插件进行有向图布局,在这里找到:
http://jointjs.com/rappid/docs/layout/directedGraph
如您所见,只要您的点击布局,树位置就会自动移动到纸张元素的左上角.如何修改这些默认位置？我看到的所提供函数的唯一选项是行之间的空间和节点之间的空间,没有初始位置.假设我想在点击"布局"时将树显示在纸张中间,我将在哪里进行更改？在此先感谢您的帮助.
我想创建一个具有新属性的自定义元素,我创建了我的自定义元素,但我需要一个新属性来存储有关该元素的信息.
joint.shapes.basic.newRect = joint.shapes.basic.Generic.extend({
markup: '<g class="rotatable"><g class="scalable"><rect/></g><text/></g>',
defaults: joint.util.deepSupplement({
type: 'basic.newRect',
attrs: {
'rect': { fill: 'white', stroke: 'black', 'follow-scale': true, width: 80, height: 40 },
'text': { 'font-size': 14, 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'y-alignment': 'middle', 'x-alignment': 'middle' }
}
}, joint.shapes.basic.Generic.prototype.defaults)
谢谢!
我正在尝试创建一个用户可以动态添加块并使用链接连接块的板.(有什么像这样,但动态地)我使用JointJs框架,到现在为止一切工作正常,但我需要显示一些信息,当用户连接两个街区.我的问题是我在连接块时无法找到要处理的事件.
我查看了这个问题,但在我的例子中,我没有附加事件的链接实例.
在这里你可以看到我的例子
以下是块如何添加到电路板中.该磁体:真正的文本属性是什么使文字连接.我真的需要一些帮助来找到链接连接时要处理的事件.
var rect = new joint.shapes.basic.newRect({
position: { x: position, y: position },
size: { width: 100, height: 40 },
attrs: {
rect: { 'stroke-width': '1', stroke: 'black', rx: 3, ry: 3, fill: 'blue'},
text: { text: 'Block', magnet: true, }
}
});
graph.addCell(rect);
我也查看了mouseUp事件和坐标,但没有任何结果......我非常感谢一些帮助
我想要做的是创建一个带有端口和路径的自定义类的元素,这样我就可以为ports添加一个带有自定义路径和我自己的标记的元素.这样当我创建一个元素时,我将为它的形状传递动态路径就像路径类的元素行为一样,并且我也从PortsModelInterface扩展,我也将拥有自己的端口标记.这整个工作就是让svg可以扩展为zomming.以前我使用html自定义元素与我的自定义端口工作正常,但自定义元素的HTML不缩放缩放
var graph = new joint.dia.
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 800,
height: 600,
gridSize: 1,
model: graph,
snapLinks: true,
embeddingMode: true
});
joint.shapes.custom1={};
joint.shapes.custom1.Element = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, {
markup: '<g class="rotatable"><g class="scalable"><rect class = "myrect"/></g><g class="inPorts"/><g class="outPorts"/></g>',
portMarkup: '<g class="port<%= id %>"><circle class="port-body"/></g>',
defaults: joint.util.deepSupplement({
type: 'html.Element',
size: { width: 200, height: 110 },
inPorts: [],
outPorts: [],
attrs: {
'.': { magnet: true},
rect: {
stroke: 'none', 'fill-opacity': 0, width: 300, height: 210,
},
circle: …使用jointjs库来构建图形,它是一个文档很少的好库.
http://jointjs.com/demos/fsa 如上页所示,当鼠标在链接上移动时,链接上有一个"删除"图标,可以单击该图标以删除链接,我想在链接上禁用"删除"操作？请指教.
我想通过双击链接为链接添加标签.所以这是我的尝试:
paper.on({
'cell:pointerdblclick': function(cellView, event, x, y){
if (cellView.model.isLink()) {
cellView.model.label(0, {
position: .5,
attrs: {
rect: { fill: 'white' },
text: { text: 'my label' }
}
});
}
},
});
问题是,通过双击,还可以同时创建一个顶点.我怎么能防止这种情况？
或者让用户为链接添加标签的另一种简单方法是什么？
标题说明了一切,我在纸上创建了一个图形并填充了单元格和链接,现在我需要添加一个工具提示来显示有关每个元素的信息(选中,悬停...).
我感谢所有提示,链接,答案......