标签: jointjs

我想让joint.js库读取我的JSON并将其显示为图表...

var paper = new joint.dia.Paper({
    el: $('#paper'),
    width: 600,
    height: 200,
    model: graph
});

var graph = new joint.dia.Graph;

jsonstring = '{"employees": [ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" } ] }';

graph.fromJSON(JSON.parse(jsonstring));

我在我的一个项目中使用了Jointjs图表库.

1)我很想知道它是否提供了限制用户不使用图表元素的方法.我的意思是:用户可以将图表视为图像而不是与图像进行交互,如调整大小,更改位置,拖动链接等.

2) 我的应用程序严重依赖它.虽然我已经解决了自动布局的问题,但是有可能使用Jointjs,我们可以告诉lib我们想要这些元素和东西,并请帮助我们制作具有最合适,非碰撞元素的图表,并且最小化如果链接是连续的直线,链接的数量是否相互碰撞以及路径中的元素？

3) 最后,我想知道我们是否可以检查与其他元素或同一图表中的其他链接发生冲突的链接.我知道在元素的情况下它是可能的.

if (element1.getBBox().intersect(element2.getBBox())) {
    // elements intersect
}

我想在JointJS Diagrams中禁用元素和链接的移动,同时保持其他特征,如元素的超链接和鼠标上的链接突出显示:悬停.我提到了以下链接:https ://groups.google.com/forum/#! searchin/jointjs/ drag/jointjs/ R0KZwKqfRbI / rGLJz3t4Un0J https://groups.google.com/forum/#!searchin/jointjs/阅读 $ 20only/jointjs/o8CKU6N7EOI/1KGNFCQQHGUJ

但他们没有帮助我.我试过了:纸.$ el.css('pointer-events','none'); 但它禁用了一切.我想只禁用元素和链接拖动

我试图在JointJs中以编程方式创建链接到具有端口的devs.Model对象.

我试图从api(http://jointjs.com/api#joint.dia.Graph:addCell)使用addCell for graph ,但由于某种原因,创建的链接没有指向正确的端口圈源和目标devs.Model对象,而是整个元素本身.

这是我试图使用的代码:

var link = new joint.dia.Link({
      source: {
        id: srcModel.id,
        port: 'out'
      },
      target: {
        id: dstModel.id,
        port: 'in'
      }
    });
// Assume graph has the srcModel and dstModel with in and out ports.
graph.addCell(link)

链接是创建的,但没有指向任何端口,所以我觉得只需要一点点调整就可以让这些链接起作用.

我刚刚发现javascript库JointJs,我用纸张和rects实现了一个图形.

但是当我减少浏览器大小时,我无法使其响应,我的图形无法正确显示.

如何让我的论文与jointjs一起响应？

在纸上工作的jointjs图表.我可以使用以下代码下载在纸上绘制的图表:

var svgDoc = paper.svg;
var serializer = new XMLSerializer();
var svgString = serializer.serializeToString(svgDoc);

现在我想在服务器上保存这个svg,它可以再次渲染到纸上,这样我就可以编辑它并再次保存.

在jointjs有可能吗？

几天来,我正试图找到解决问题的方法.我有一个用jointjs制作的工作流可视化模块.但有很多链接,他们聚集起来,变得难以理解.我想让他们互相避开,往往是平行而不是彼此.第二名:没有路由器,跳过连接器)我正在考虑一个想法:当创建一个链接时,我将全部被链接像素占用并将它们添加到障碍物地图......不知何故.我不确定它是否可能,因为它是矢量图形.有想法的人吗？

使用metro路由器:

没有路由器,跳线连接器:

我正在使用JointJS图,使用DirectedGraph来处理布局,我正在尝试实现类似于下图的内容.我需要将节点(A,B,C,D,E,F,G,H,I,J)"概括"或包含在单独的节点(Foo,Bar,Hmm)中.当我将所有元素添加到图表中时,一切都在彼此之上.但是,如果我不在区域之间添加顶点,则所有元素都会正确布局,但没有连接区域的顶点.

根据下面的代码,我做错了什么？节点(A,B,C,D,E,F,G,H,I,J)是否会导致错误,因为它们没有连接到图表的其余部分？

您提供的任何反馈都非常感谢.

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
    el: $('#paper');
    width: 2000,
    height: 2000,
    gridSize: 1,
    model: graph
});

var regions = [ makeRegion('Foo'), makeRegion('Bar'), makeRegion('Hmm')];
var nodes = [
    makeNode('A'),
    makeNode('B'),
    makeNode('C'),
    makeNode('D'),
    makeNode('F'),
    makeNode('G'),
    makeNode('H'),
    makeNode('I'),
    makeNode('J'),
];
regions[0].embed(nodes[0]).embed(nodes[1]).embed(nodes[2]);
regions[1].embed(nodes[3]).embed(nodes[4]).embed(nodes[5]);
regions[2].embed(nodes[6]).embed(nodes[7]).embed(nodes[8]);
var vertices = [
    connect(regions[0], regions[1]),
    connect(regions[1], regions[2]),
    connect(regions[2], regions[0])
    ];
paper.addCells(regions.concat(nodes).concat(vertices));
joint.layout.DirectedGraph.layout(paper, {
    rankDir: 'LR',
    marginX: 30,
    marginY: 30,
    clusterPadding: {
        top: 30,
        left: 10,
        right: 10,
        bottom: 10
    }
}); …

使用类似的东西paperScroller.zoom(0.2, { max: 5 });只会导致 svg 元素被缩放，而在我的自定义形状中，我也使用了 html，它不会同时缩放。

由于在缩放时没有触发 model.change 事件，因此不会调用 ElementView 中的 updateBox 方法，因此 html 元素不会相应地同步它们的尺寸和定位。有没有办法解决这个问题？

我创建了一个带有 JointJS 单元格的图表，现在我想通过单击它来更改单元格的标签。当我单击一个单元格时，会弹出一个模式，然后我输入一个新文本。文本将存储在变量中。当模态关闭时，单击单元格的标签将更改为变量的值。

现在的问题是：假设我有四个单元格，每个单元格都有标签“a”。我单击第一个单元格并将标签更改为“b”。那个有效。现在我将第二个单元格的标签更改为“c”，现在问题出现了。第一个和第二个单元格都有新标签“c”。如果我将第三个单元格的标签更改为“d”，则所有三个修改后的单元格都具有新标签“d”。

我的方法：我有一个事件侦听器，handleClickOnCell()当我单击一个单元格时它会执行该函数。该函数将单击的单元格作为参数传递。

paper.on('cell:pointerclick', handleClickOnCell);

在函数内部handleClickOnCell()，会触发一个模态弹出窗口。我输入一个文本，文本值被分配给var textLabel. 那个有效。当模态隐藏时，标签将更改为以下值labelText：

function handleClickOnCell(e) {
  $('#captionModal').modal('show');
  $('#captionModal').on('hidden.bs.modal', function () {
    e.model.attr('label/text', labelText);
  });
};

更改标签有效，但是当我更改单元格的标签时，我已经更改过一次标签的所有先前单元格也将它们的标签更改为新标签。

我不知道是什么问题。我认为这是一个参考问题，但我不知道如何解决它。对于更合适的方法的提示或建议，我将不胜感激。