我一直在看一个JointJS路由演示( ),我设法将它应用到了我的web应用程序中。这个例子只有两个元素之间的单一联系,只有三个障碍,而在我的应用程序中,我有大约50个元素(可以同时是源、目标和障碍),它们之间有80多个链接。
我有一个页面上所有元素的列表: listOfElements,以及它们之间所有链接的列表: listOfLinks
按照上面JointJS.com链接的逻辑,我执行以下操作:
graph.on('change:position', function(cell) {
// have any elements been moved? Then re
我正在使用JointJS创建动态图形。在我的场景中,我得到了两篇论文。左边的包含元素形状作为模板,我可以拖放到右边的纸上。一切都很好。但是现在我想把一个元素-形状放在另一个元素上(例如一个耦合的元素)。如果左侧元素与右侧纸张上的任何其他元素相交,则应触发一个事件,将新元素形状嵌入到现有元素形状中。
到目前为止,我得到了这个,但交叉点不起作用:
...
//try to embed by dropping
_.each(graph.getElements(), function (el) {
if (el.getBBox().intersect(cellView.model.getBB
我们正在尝试使用JointJS构建一个可视化框架(我们没有使用Rappid)。SVG用于在浏览器上呈现图形数据。我们有一个有大约4500个端口的模型的场景。我们使用端口作为元素,而不是属性。也就是说,我们在模型中嵌入了作为单元格的端口。有一定的理由需要这样的设置。
当这样的模型被添加到图形中时,渲染大约需要8到9秒。一旦模型呈现,移动和重新定位模型可以正常工作。然而,当我们试图添加进一步的模型时,浏览器往往会崩溃。
这就是我们如何创建纸张对象的方法
function createPaper(options) {
var paper = new joint.dia.Paper({
我目前正在为我即将到来的项目研究一个合适的库,在这个库中,我必须创建一个可以创建数据流图的应用程序。在我的研究中,我接触到了JointJs,我也已经用它创建了一些原型。到目前为止,它看起来很好,但有一件事我需要帮助。
因此,该应用程序将在移动设备上运行,这就是为什么我不想使用端口,而是能够使用整个形状作为磁铁,并在纸上绘制其他形状的链接。这会导致链接在连接到圆形时以这种奇怪的方式运行(请参见)。
这是我在图片示例中使用的函数,用于将圆形添加到纸张中:
function addProcess() {
var c = new joint.shapes.standard.Circle({
我一直在使用JointJS在页面上绘制流程图,非常不爽,目前只发现JointJS只能在页面加载之前映射图形,因此,我希望通过单击按钮在画布上画出一个图形(如矩形),简单的代码体系结构如下:
<button onclick='addCell()'/>
<div id='paper'/>
var graph = new joint.dia.Graph();
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 158
当我们删除元素时,我想在图形中动画一个物体。
new joint.dia.Graph().on({
'add': function(cell, collection, opt) {
// Here I want to animate the element while dropped.
}
});
知道怎么解决这个问题吗?