Joint.js树形布局下边缘无法随节点正常移动的解决方法求助

问题描述 #

我尝试使用Joint.js绘制带有Tree Layout的图形，未启用布局时图形运行正常，链接响应良好；但切换为树形布局后，链接无法随节点正常移动。

相关代码 #

JavaScript代码 #

var namespace = joint.shapes;
var graph = new joint.dia.Graph({}, { cellNamespace: namespace });
var graphLayout = new joint.layout.TreeLayout({
    graph: graph,
    parentGap: 30,
    siblingGap: 40
});
var paper = new joint.dia.Paper({
    el: document.getElementById('myholder'),
    model: graph,
    width: 600,
    height: 1000,
    gridSize: 10,
    drawGrid: true,
    background: {
        color: 'rgba(0, 255, 0, 0.3)'
    },
    cellViewNamespace: namespace
});
var rect = new joint.shapes.standard.Rectangle();
rect.position(100, 30);
rect.resize(100, 40);
rect.attr({
    body: {
        fill: 'blue'
    },
    label: {
        text: 'Hello',
        fill: 'white'
    }
});
rect.addTo(graph);
var rect2 = rect.clone();
rect2.translate(0, 300);
rect2.attr('label/text', 'World!');
rect2.addTo(graph);
var link = new joint.shapes.standard.Link(
    {
        router: {
            name: "manhattan",
        },
        connector: {
            name: "rounded",
        },
        attrs: {
            line: {
                stroke: "#25085b",
            },
        }
});
link.source(rect);
link.target(rect2);
link.addTo(graph);
var root = graph.getElements()[0].position(100, 100);
graphLayout.layout();

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.1/backbone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.6.5/joint.js"></script>
<script src="https://resources.jointjs.com/demos/rappid/build/package/rappid.js"></script>
<div id="myholder" style="width: 100%"></div>

问题原因 #

Joint.js的TreeLayout默认是一次性布局，仅在调用layout()时计算节点位置并更新链接，不会自动监听后续的节点移动事件。因此当节点被拖动时，链接不会自动重新计算路径。

解决方法 #

修改TreeLayout的初始化配置，添加linkUpdate: true选项，让布局自动监听节点移动并更新链接；同时明确设置interactive: true确保节点可拖动（默认已开启，但显式配置更稳妥）。

修改后的布局初始化代码 #

var graphLayout = new joint.layout.TreeLayout({
    graph: graph,
    parentGap: 30,
    siblingGap: 40,
    linkUpdate: true, // 启用链接自动更新
    interactive: true // 允许节点交互拖动
});

完整修改后的JavaScript代码 #

var namespace = joint.shapes;
var graph = new joint.dia.Graph({}, { cellNamespace: namespace });
var graphLayout = new joint.layout.TreeLayout({
    graph: graph,
    parentGap: 30,
    siblingGap: 40,
    linkUpdate: true,
    interactive: true
});
var paper = new joint.dia.Paper({
    el: document.getElementById('myholder'),
    model: graph,
    width: 600,
    height: 1000,
    gridSize: 10,
    drawGrid: true,
    background: {
        color: 'rgba(0, 255, 0, 0.3)'
    },
    cellViewNamespace: namespace
});
var rect = new joint.shapes.standard.Rectangle();
rect.position(100, 30);
rect.resize(100, 40);
rect.attr({
    body: {
        fill: 'blue'
    },
    label: {
        text: 'Hello',
        fill: 'white'
    }
});
rect.addTo(graph);
var rect2 = rect.clone();
rect2.translate(0, 300);
rect2.attr('label/text', 'World!');
rect2.addTo(graph);
var link = new joint.shapes.standard.Link(
    {
        router: {
            name: "manhattan",
        },
        connector: {
            name: "rounded",
        },
        attrs: {
            line: {
                stroke: "#25085b",
            },
        }
});
link.source(rect);
link.target(rect2);
link.addTo(graph);
var root = graph.getElements()[0].position(100, 100);
graphLayout.layout();

补充说明 #

• linkUpdate: true会让布局监听节点的change:position事件，每当节点移动时自动重新计算链接路径，保证链接跟随节点同步更新。
• 如果需要更精细的控制，也可以手动监听节点移动事件，在回调中调用graphLayout.layout()重新布局，但启用linkUpdate是更简洁高效的方式。

内容的提问来源于stack exchange，提问作者sunita padhiyar