如何提高具有多个链接的 JointJS 的性能？

Question

分析代码后，似乎重复调用了 bbox 函数。我无法删除标记源、标记目标和连接包装，因为我需要这些功能。有没有办法提高性能？

Answer 1

尝试将 marker-source 和 marker-target 替换为 SVG Markers。如果您的应用程序不需要不同大小和颜色的标记，则实现起来相对容易。例如：

定义你自己的标记箭头。

var arrowMarker = V('marker', {
   viewBox: "0 0 10 10",
   refX: 9,
   refY: 5,
   markerWidth: 6,
   markerHeight: 6,
   orient: "auto"
}, [
   V('path', {
       'd': "M 0 0 L 10 5 L 0 10 z",
       'fill': 'green'
   })
]);

将标记添加到纸张的 SVG Defs 以便以后可以多次重复使用。

V(paper.defs).append(arrowMarker);

终于把记号笔放在link上了。使用 marker-end or marker-start 属性分别定义 target。 source 标记。

var link = new joint.dia.Link({
    markup: '<path class="connection"/><path class="connection-wrap"/>',
    attrs: {
        '.connection': {
            'stroke': 'green',
            'stroke-width': 2,
            'marker-end': 'url(#' + arrowMarker.attr('id') + ')'
        }
    }
});

有一个 JSFiddle，其中包含示例和其他有用的性能提示。

如何提高具有多个链接的 JointJS 的性能？

How do I improve performance of JointJS with many links?

jointjs