- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在处理 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
}
}
});
}
编辑:
虽然我从来没有找到解决这个问题的好方法,但我确实发现通过一些额外的工作,这是可以实现的。它假定您的图形不太复杂,区域之间的边很少。
如果我单独添加边,在所有节点都添加到图中后,它就可以正常工作。然而,定向布局并没有完全按预期工作。我最初使用 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
}
}
});
}
最佳答案
这是 Dagre-D3 的一个已知问题:Automatic layout does not work on hierarchical diagrams with links with parent .
作为解决方法,您可以省略区域之间的链接(在您的问题版本中建议),或者您可以做一些额外的工作,这些工作将很好地适用于任意数量的节点:
分别布局每组子节点:
var fooChildren = [nodes[0], nodes[1], nodes[2]];
var barChildren = [nodes[3], nodes[4], nodes[5]];
var hmmChildren = [nodes[6], nodes[7], nodes[8]];
var children = [fooChildren, barChildren, hmmChildren];
for(var i = 0; i < children.length; i++)
joint.layout.DirectedGraph.layout(children[i]);
为每个区域创建一个辅助克隆区域。
var clones = [];
for(var i = 0; i < regions.length; i++) {
var clone = regions[i].clone();
graph.addCell(clone);
clones.push(clone);
}
将相应的节点设置为它们的克隆区域。
for(var i = 0; i < children.length; i ++)
for(var k = 0; k < children[i].length; k++)
clones[i].embed(children[i][k]);
使每个克隆区域适合其子区域的大小,并使用克隆区域的大小调整原始区域的大小。
for(var i = 0; i < clones.length; i++) {
clones[i].fitEmbeds(padding: { top: 30, left: 10, right: 10, bottom: 10 });
regions[i].resize(clones[i].getBBox().width, clones[i].getBBox().height);
}
布局图表。
joint.layout.DirectedGraph.layout(graph, {
rankDir: 'LR',
marginX: 30,
marginY: 30,
clusterPadding: {
top: 30,
left: 10,
right: 10,
bottom: 10
}
});
将克隆的区域平移到其原始区域的位置(子区域将相应地平移)。
for(var i = 0; i < clones.length; i++) {
var dx = regions[i].getBBox().x - clones[i].getBBox().x;
var dy = regions[i].getBBox().y - clones[i].getBBox().y;
clones[i].translate(dx, dy);
}
删除克隆区域并将子区域设置为原始区域。
for(var i = 0; i < regions.length; i++) {
clones[i].remove();
for(var j = 0; j < children[i].length; j++)
regions[i].embed(children[i][j]);
}
希望这可以帮助提供替代解决方案。
关于javascript - 为什么我的嵌入式 JointJS 元素重叠?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36314398/
我想知道JointJS提供了什么样的动画? 有没有我可以引用的文档或链接? 最佳答案 您可以阅读 JointJS 中可用的转换 here 关于jointjs - 我们在 JointJS 中可以做哪些动
我已经实现了纸张的缩放,效果很好。 我将它与鼠标滚轮的滚动联系起来,但我仍然遇到一个问题:在 API 中,缩放函数定义为 scale paper.scale(sx, sy, [ox, oy])我认为
如何使链接在 1 点内保持与单元或端口的连接? 如果端口是圆形,则当单元移动时,与其连接的链路端会移动穿过该圆形。 我希望能够使其保持在同一点 - 圆边缘的中心。 期望: 当我向下移动单元格时会发生什
JointJs 是否有启用/绘制图表网格线的选项? 如果没有,有没有办法自定义实现并绘制网格线? 最佳答案 根据jointjs changelog您现在可以通过 joint.dia.paper 的 d
我有一个使用 JointJs 生成的图形,它使用 jointjs 提供的 Dagre 布局。目前,图表从上到下对齐,这是正确的方式,但随后完整的图表将对齐到纸张的左侧。 我需要图表在纸的中间水平对齐。
你好我正在尝试使用 JointJS 库执行 Hello world 应用程序,如下所示: http://www.jointjs.com/tutorial#hello-world我已经下载了 joint
我想获得与元素关联的所有传出链接。在jointJs 中实现这一点的方法是什么。实际上我已经尝试过类似的方法,但它同时给出了传出和传入的结果。 paper.findViewByModel(start).
我想禁用 JointJS 图表中元素和链接的移动,同时保持其他功能,如元素的超链接和鼠标悬停时链接的突出显示。我引用了以下链接: https://groups.google.com/forum/#!s
想象一下,我有一个 Rect 元素,我希望在左上角用一个小的(比如 16x16)PNG 图像装饰它。我无法确定如何完成该任务。我已经研究了文档,但(到目前为止)无法找到有关如何实现该任务的示例或引用。
如果纸张对于显示的 div 来说太大,我想让纸张可拖动。 我尝试了空白:pointerdown 和pointerup 事件的论文,但不能只跟随鼠标移动。我还尝试通过 jquery 使纸张元素可拖动,但
我有一份带有图表的工作文件。我已向图表中添加了多个单元格,并且正在尝试监听 cell:highlight 事件,但我从未收到它。 我正在做: paper.on('cell:highlight', fu
我正在尝试将 JointJS 与端口功能一起使用: (...) var model = joint.shapes.devs.Model({ siz
当我将圆圈元素拖出组时,如何取消附加圆圈元素?目前我可以将它附加到组中,但无法在拖动时取消附加。如果任何人有想法,请提供帮助。我是 d3js 和 javascript 的新手 演示:http://js
我试图避免链接在空间中结束,我只想允许链接将一个元素与另一个元素连接起来。我当前的代码是: new joint.shapes.basic.Rect({ id: id, size: {
如何在联合js中的矩形内输入文本区域/文本输入? 我有几个矩形。我想首先将文本输入到矩形中。我必须为此创建自定义元素还是可以使用预定义的形状? 这是我的代码: var
我有一个只读图表来可视化一些数据。我的最终用户希望“过滤”数据,以便一次只能显示数据的一个子集。我意识到每次应用过滤器时都可以重新绘制整个图表,忽略不显示的元素,但我想知道是否有一种方法可以简单地动态
我正在研究 JointJS。我有各种带有文字的元素。然而,元素的宽度随着文本的增加而增加。我想动态设置元素的大小,以便框可以达到最大高度和宽度,并通过文本换行相应地扩展。如果文本操作系统无法适应最大高
我正在使用此解决方案 ( Joint.js Drag and Drop Element between two papers ) 拖放两篇论文,效果非常好。 我想知道是否存在一种方法可以知道您是否将幽
我正在使用joint.shapes.devs.js插件在我的jointJS文档上创建元素。我想创建一个在您单击某个元素时出现的菜单,以便显示和修改其所有数据以及删除该元素。 由于我不是 Backbon
我的应用程序中有一个可以滚动纸张的平移 Controller 。如何获取所显示内容的坐标以查看元素是否完全在屏幕上? 最佳答案 您需要知道纸张元素的坐标(x、y、宽度、高度)。 x、y 可以是 scr
我是一名优秀的程序员,十分优秀!