Question

我在我们的Web应用程序中使用joints / rappid。以编程方式向我的图形添加多个链接时，我注意到了性能问题。在我的示例中，我向图形添加了45个链接，这些链接需要大约3秒钟才能在相当快的计算机上完成。

我能做得更好吗？如何提高性能？

链接的外观没有区别-瓶颈是addCell函数。

这是我的图表的快照：（http://www.epro.de/exchange/virtual-reality/jointjs/linkTest.png）

以下是源示例：

 var link = new joint.shapes.app.Link({
            router: {
                name: 'manhattan'
            },
            connector: {
                name: 'rounded',
              args: {radius: 10}
            },
            source: {
                id: l_source.id,
                port: sourcePort
            },
            target: {
                id: l_target.id,
                port: targetPort
            },
            attrs: {
                '.marker-target': {
                    d: 'M 10 0 L 0 5 L 10 10 z',
                    stroke: 'transparent',
                    fill: '#222138',
                    transform: 'scale(0.5)' 
                },
                '.connection': {
                    stroke: 'blue',
                    'stroke-dasharray': '0',
                    'stroke-width': 1
                }
            },
           arrowheadMarkup: [
            '<g class="marker-arrowhead-group marker-arrowhead-group-<%= end %>">',
            '<path class="marker-arrowhead" end="<%= end %>" d="M 14 0 L 0 7 L 14 14 z" />',

            '</g>'
          ].join(''),
          toolMarkup: [
            '<g class="link-tool">',
            '<g class="tool-remove" event="remove">',
            '<circle r="8" />',
            '<path transform="scale(.5) translate(-16, -16)" d="M24.778,21.419 19.276,15.917 24.777,10.415 21.949,7.585 16.447,13.087 10.945,7.585 8.117,10.415 13.618,15.917 8.116,21.419 10.946,24.248 16.447,18.746 21.948,24.248z" />',
            '<title>Remove link.</title>',

            '</g>',

            '</g>'
          ].join(''),
        });

    l_graph.addCell (link);

谢谢迪特尔

Answer 1

我找到了解决方案。我首先收集数组中的所有单元格和链接，然后执行以下操作： graph.resetCells（allElementArray）;

然后，我为所有元素按升序设置缺少的z属性。这样可以将加载时间从3秒缩短到0.4秒。

以编程方式向图形添加多个链接时，jointjs中的性能问题

1 个答案: