具有相同源和目标的JointJS链接

在JointJS中，链接（link）是用来连接两个图形元素（如矩形、椭圆等）的线段。如果你想要创建具有相同源（source）和目标（target）的链接，即一个环（loop）链接，你可以按照以下步骤进行：

使用JointJS创建环链接

创建图形（Graph）：首先，你需要创建一个JointJS图形实例。 var graph = new joint.dia.Graph({}, { cellNamespace: joint.shapes.standard });
创建矩形元素：创建一个矩形元素并将其添加到图形中。 var rect = new joint.shapes.standard.Rectangle(); rect.position(100, 100); rect.resize(100, 40); rect.attr({ body: { fill: 'blue' }, label: { text: 'Node', fill: 'white' } }); graph.addCell(rect);
创建环链接：创建一个链接并将其源和目标都设置为刚才创建的矩形元素。 var link = new joint.shapes.standard.Link(); link.source(rect); // 设置源为矩形元素 link.target(rect); // 设置目标为矩形元素 link.attr({ line: { stroke: 'black', strokeWidth: 2 } }); graph.addCell(link);
渲染图形：最后，你需要一个视图（View）来渲染图形。 var paper = new joint.dia.Paper({ el: document.getElementById('paper'), model: graph, width: 800, height: 600, gridSize: 10 });

完整示例代码

<!DOCTYPE html>
<html>
<head>
    <title>JointJS Loop Link Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.5.0/joint.min.js"></script>
    <style>
        #paper {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="paper"></div>
    <script>
        $(document).ready(function() {
            var graph = new joint.dia.Graph({}, { cellNamespace: joint.shapes.standard });

            var rect = new joint.shapes.standard.Rectangle();
            rect.position(100, 100);
            rect.resize(100, 40);
            rect.attr({
                body: {
                    fill: 'blue'
                },
                label: {
                    text: 'Node',
                    fill: 'white'
                }
            });
            graph.addCell(rect);

            var link = new joint.shapes.standard.Link();
            link.source(rect);
            link.target(rect);
            link.attr({
                line: {
                    stroke: 'black',
                    strokeWidth: 2
                }
            });
            graph.addCell(link);

            var paper = new joint.dia.Paper({
                el: document.getElementById('paper'),
                model: graph,
                width: 800,
                height: 600,
                gridSize: 10
            });
        });
    </script>
</body>
</html>

在这个示例中，我们创建了一个矩形元素，并将其作为链接的源和目标，从而创建了一个环链接。你可以根据需要调整矩形和链接的属性。