9

有没有办法随机定位使用 jsPlumb 创建的所有对话框/窗口？

如果我有很多我想在这些对话框中表示的项目，但问题是我需要通过给它们一个位置来将它们放在屏幕上，但是由于有很多项目，这将是一项乏味的工作，更不用说这个了项目列表可能会增长/缩小。

查看 jsPlumb 演示，使用“top”和“left”CSS 属性给对话框指定位置：

#window3 { top:2em; left:2em; }
#window4 { top:2em; left:32em; }

有没有办法将这些对话框随机放置在屏幕上但它们之间有一定的距离？如果有一种方法可以将对话框放置在屏幕上，这样箭头和对话框之间的交叉就会最小，那就更好了。

编辑：

不完全是最好的解决方案，但一个非常好的解决方案：

http://forums.lndb.info/showthread.php?tid=43

https://github.com/lndb/jsPlumb_Liviz.js（这里提供了两个demo）

http://lndb.info/light_novel/diagram/Hidan_no_Aria

4

2 回答 2

1

第一个解决方案是使用这个库：https ://github.com/lndb/jsPlumb_Liviz.js

连接元素的 jsPlumb 库与 Liviz.js 的组合，用于定位这些元素。

换句话说：使用 jsPlumb 进行 UI（连接 div），使用 Liviz.js 定位这些元素（div）。

我发现的另一个解决方案是使用“dagre - Directed graph rendering” javascript 库：https ://github.com/cpettitt/dagre

Dagre 是一个 JavaScript 库，可以轻松地在客户端布局有向图。

该库的主要优先事项是：

完全客户端计算的布局。如果客户端布局不是您的要求，那么有很棒的、功能丰富的替代方案，例如 graphviz。

速度。Dagre 必须能够快速绘制中等大小的图形，这可能会以无法采用更优化或更精确的算法为代价。

渲染不可知论。Dagre 只需要非常基本的信息来布置图，例如节点的尺寸。您可以使用您喜欢的任何技术自由渲染图形。我们在一些示例中使用了 D3，如果您打算使用 CSS 和 SVG 进行渲染，我们强烈推荐它。

于 2013-05-07T07:50:39.277 回答
1

如果我正确理解了这个问题，那么您会担心组件的初始定位，并且您正在寻找通用解决方案（与组件的大小和组件的数量无关）。

关注点分离：初始组件定位的任务可以独立于 jsPlump 来看待：

对于我的示例，我选择具有以下要求的算法：

  • 将组件均匀地放置在屏幕上，将视口宽度作为水平包含

  • 组件的边距应该可以通过 CSS 调整

  • 组件必须保持可拖动以保持 jsPlumb 功能

在我的解决方案中，我利用了这样一个事实，即通过相对定位，可以很容易地将组件分布在网格中。给包含 DIV 一个初始类“initial”，我为组件定义了以下 CSS：

#demo.initial .component.window {
    position:relative;
    float:left;
    margin:60px;
}

在将 DOM 组件呈现为网格之后，我将它们的 CSS 位置从相对更改为绝对（通过删除容器的“初始”类并在其样式属性中应用组件的偏移量）。

$(document).ready(function() {
    $(".component.window").each(function(i) {
        var left = $(this).offset().left;
        var top = $(this).offset().top;
        $(this).css({
            left: left,
            top: top
        });
    });
    $("#demo.initial").removeClass("initial");
});

这是我的 jsbin 的链接

编辑：这是jsfiddle 的链接

组件的初始位置将根据目标框架的宽度而有所不同。

于 2013-03-04T11:52:34.663 回答