我正在研究 JointJS 图,使用 DirectedGraph 来处理布局,我试图实现类似于下图的效果。我需要将节点(A、B、C、D、E、F、G、H、I、J)“概述”或包含在单独的节点(Foo、Bar、Hmm)中。当我将所有元素添加到图表中时,所有元素都在彼此之上。但是,如果我不在区域之间添加顶点,则所有元素都会正确布局,但没有连接区域的顶点。
根据下面的代码,我做错了什么?节点(A、B、C、D、E、F、G、H、I、J)是否会因为未连接到图的其余部分而导致错误?
非常感谢您提供的任何反馈。
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#paper');
width: 2000,
height: 2000,
gridSize: 1,
model: graph
});
var regions = [ makeRegion('Foo'), makeRegion('Bar'), makeRegion('Hmm')];
var nodes = [
makeNode('A'),
makeNode('B'),
makeNode('C'),
makeNode('D'),
makeNode('F'),
makeNode('G'),
makeNode('H'),
makeNode('I'),
makeNode('J'),
];
regions[0].embed(nodes[0]).embed(nodes[1]).embed(nodes[2]);
regions[1].embed(nodes[3]).embed(nodes[4]).embed(nodes[5]);
regions[2].embed(nodes[6]).embed(nodes[7]).embed(nodes[8]);
var vertices = [
connect(regions[0], regions[1]),
connect(regions[1], regions[2]),
connect(regions[2], regions[0])
];
paper.addCells(regions.concat(nodes).concat(vertices));
joint.layout.DirectedGraph.layout(paper, {
rankDir: 'LR',
marginX: 30,
marginY: 30,
clusterPadding: {
top: 30,
left: 10,
right: 10,
bottom: 10
}
});
function makeNode(name) {
return new joint.shapes.basic.Rect({
size: {
width: 35,
height: 35
},
attrs: {
text: {
text: name
}
}
});
}
function connect(a, b) {
return new joint.shapes.fsa.Arrow({
source: { id: a.id },
target: { id: b.id }
});
}
function makeRegion(name) {
return new joint.shapes.basic.Rect({
size: {
width: 300,
height: 200
},
attrs: {
text: {
text: name
}
}
});
}
EDIT:
虽然我从未找到解决这个问题的好方法,但我确实发现通过一些额外的工作,这是可以实现的。它假设您的图不太复杂,区域之间的边很少。
如果我单独添加边,在所有节点都添加到图中之后,它就可以正常工作。然而,定向布局并没有完全按照预期工作。我用了joint.layout.DirectedGraph.layout()
最初是为了对齐内部节点,然后我重新定位外部区域。最后我添加了边缘,这产生了与上图类似的结果。
以下是我如何实现这一目标的粗略概述:
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#paper');
width: 2000,
height: 2000,
gridSize: 1,
model: graph
});
var regions = [ makeRegion('Foo'), makeRegion('Bar'), makeRegion('Hmm')];
var nodes = [
makeNode('A'),
makeNode('B'),
makeNode('C'),
makeNode('D'),
makeNode('F'),
makeNode('G'),
makeNode('H'),
makeNode('I'),
makeNode('J'),
];
regions[0].embed(nodes[0]).embed(nodes[1]).embed(nodes[2]);
regions[1].embed(nodes[3]).embed(nodes[4]).embed(nodes[5]);
regions[2].embed(nodes[6]).embed(nodes[7]).embed(nodes[8]);
paper.addCells(regions.concat(nodes));
joint.layout.DirectedGraph.layout(paper, {
rankDir: 'LR',
marginX: 30,
marginY: 30,
clusterPadding: {
top: 30,
left: 10,
right: 10,
bottom: 10
}
});
var vertices = [
connect(regions[0], regions[1]),
connect(regions[1], regions[2]),
connect(regions[2], regions[0])
];
repositionRegions();
// Add the edges after all the nodes are in their final position
graph.addCells(vertices);
function repositionRegions() {
// Move regions to where you want them
}
function makeNode(name) {
return new joint.shapes.basic.Rect({
size: {
width: 35,
height: 35
},
attrs: {
text: {
text: name
}
}
});
}
function connect(a, b) {
return new joint.shapes.fsa.Arrow({
source: { id: a.id },
target: { id: b.id }
});
}
function makeRegion(name) {
return new joint.shapes.basic.Rect({
size: {
width: 300,
height: 200
},
attrs: {
text: {
text: name
}
}
});
}