Question

我一直在研究JointJS路由演示（http://www.jointjs.com/demos/routing ），我设法在我的网络应用程序中应用。该示例在2个元素之间只有一个链接，只有3个障碍，而在我的应用程序中，我有大约50个元素（可以同时是源，目标和障碍），它们之间有80多个链接。

我有一个页面上所有元素的列表： listOfElements ，以及它们之间所有链接的列表： listOfLinks

按照上面JointJS.com链接的逻辑，我正在做以下事情：

graph.on('change:position', function(cell) {
    // have any elements been moved? Then reroute all of the links.
    for(var j = 0; j < listOfLinks.length; ++j) {
       if (_.contains(listOfElements, cell)) paper.findViewByModel(listOfLinks).update();
    }
});

上述类型的技巧，但是当我拖动元素时，性能受到巨大打击，因为每当我移动元素时都会检查每个链接。

是否有一种有效的方法来检查JointJS中链接和元素的冲突？我一直在挖掘，但似乎无法找到有关此事的任何信息。
我真的在做一些有自杀性能的事吗？有没有办法加快速度？

除了JointJS之外，我也对其他有关智能路由的建议持开放态度。我也试过jsPlumb，但没有成功。任何帮助将不胜感激。

先谢谢你，伙计们，继续做好工作！

Answer 1

我只是简单地看了一下这个例子，但是迭代listOfLinks.length次看起来很奇怪，并且每次都发送所有链接。

怎么样：

graph.on('change:position', function(cell) {
    if (_.contains(listOfElements, cell)) {
        for (var i=0; i<listOfLinks.length; i++) {
            paper.findViewByModel(listOfLinks[i]).update();
        }
    }
});

我试图查找如何仅更新该区域中的链接，遗憾的是，它似乎很容易找到重叠元素。但这就是我想出来的：

function overlap(rect1, rect2) {
    return !(rect1.right < rect2.left || 
             rect1.left > rect2.right || 
             rect1.bottom < rect2.top || 
             rect1.top > rect2.bottom);
}

graph.on('change:position', function(cell) {
    if (_.contains(listOfElements, cell)) {
        var bbox = paper.findViewByModel(cell);
        _.each(listOfLinks, function(link) {
            var linkView = paper.findViewByModel(link);
            if (overlap(linkView.getBBox(), bbox)) {
                linkView.update();
            }
        });
    }
});

JavaScript：JointJS中的智能路由（性能问题？）

1 个答案: