javascript - jsPlumb/JQuery 如何定位任意数量的节点？

Question

我正在尝试实现周边锚点，我终于达到了我的所有节点都在它们的形状内，按照它们应该的方式连接，而不是重叠，但我找不到如何在页面上更好地分散它们。

我有 2 组节点，第 1 组中的每个节点都连接到第 2 组中的所有相关节点。所有节点依次出现，连接相互重叠。我正在尝试关注github 上的演示，我看到每个节点都有额外的样式属性，将其定位在页面上的某个位置，我找不到如何、在何处或添加此属性的内容。

如何以一种很好的方式分散节点，使它们不会相互重叠？

Answer 1

这个库可能会有所帮助：https ://github.com/lndb/jsPlumb_Liviz.js

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

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

Answer 2

我以前从未使用过这个库，但通过查看 API 文档。

尝试将 设置anchorCount为较小的值，默认为60。

[ "Perimeter", {
      shape:$(shapes[i]).attr("data-shape"),
      rotation:$(shapes[i]).attr("data-rotation"),
      anchorCount: 30 }]

这样，锚将在形状上更加分散。

您还可以查看StateMachine Connector，它似乎有一个proximityoption 和 a curviness，可能两者都可以帮助您避免冲突。

我希望我理解你的问题

Answer 3

好的，经过长时间的敲打我的头在墙上，我终于明白了。它不是完美的，也不是很好，但基本上它做了我想要的，即：放置任意数量的节点，它们相互重叠。

首先，jsPlumb 不定位节点，它把它留给你，它只是连接它们。因此，在运行 jsPlumb.connect() 之前，我必须使用 js 和 css 分散节点。

这是代码：

CSS：

.group1, .group2 {
    z-index:6;
    opacity:0.7;
    filter:alpha(opacity=70);
    position:absolute;
    cursor:pointer;
    text-align:center;
    color:#333;
}

[data-shape=ellipse] {
    width:210px;
    height:70px;
    left:250px;
    top:300px;
    line-height: 70px;
    background-image:url(../img/ellipse.png);
}

[data-shape=circle] {
    width:70px;
    height:70px;
    left:100px;
    top:60px;
    line-height: 60px;
    background-image:url(../img/circle.png);
}

#chart {
    width:80%;
    height:50em;
    margin-left:3em;
    margin-top:3em;
    position:relative;
}

JS：

function random_width() {
    return Math.floor(Math.random() * (900 - 200) + 200);
}

function random_height() {
    return Math.floor(Math.random() * (700 - 200) + 200);
}

function overlap (el1, el2) {
    var x1 = $(el1).offset().left;
    var x2 = x1 + $(el1).width();
    var y1 = $(el1).offset().top;
    var y2 = y1 + $(el1).height();

    var x3 = $(el2).offset().left;
    var x4 = $(el2).width() + x3;
    var y3 = $(el2).offset().top;
    var y4 = $(el2).height() + y3;

    if (x3 > x3 || x4 < x1) { return false; } //overlap not possible
    if (y3 > y2 || y4 < y1) { return false; } //overlap not possible

    if (x3 > x1 && x3 < x2) { return true; }
    if (x4 > x1 && x4 < x2) { return true; }

    if (y3 > y1 && y3 < y2) { return true; }
    if (y4 > y1 && y4 < y2) { return true; }
}

function change_position(el) {
    $(el).css({'left': random_width(), 'top': random_height()});
}

function have_overlap(els) {
    for (var k = 0; k < els.length; k++) {
        for (var t = 0; t < els.length; t++){
            if (k !== t && overlap(els[k], els[t])){
                return true;
            }
        }
    }

    return false;
}

function disperse() {
    var group1 = $('.group1');
    var group2 = $('group2');
    var divs = $.merge(group1, group2);
    var set = [];

    console.log('dispersing');
    for (var i = 0; i < divs.length; i++) {
        set.push(divs[i]);
        change_position(divs[i]);
        while (have_overlap(set)) {
            change_position(divs[i]);
        }
    }
}

它正在做的是：

1. 获取我要使用的所有节点。
2. 放置第一个节点，将其保存在set数组中。
3. 放置下一个节点，将其添加到set并检查它是否与set数组中的其他节点重叠，如果重叠，请保持移动。

当所有节点分散时，我运行 jsPlumb.connect()，瞧，它们都是连接的。我对这里的效率并不感到满意，它需要时间才能完成。如果有人对如何改进它有任何建议，我很想听听。