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

Question

I'm trying to implement Perimeter Anchors, and I finally got to the point where i have all nodes inside their shapes, connected as they should, and not overlapping, but I can't find how to disperse them more nicely on the page.

I have 2 groups of nodes, each node in group 1 is connected to all related nodes in group 2. All the nodes appear one after another, with connections overlapping each other. I'm trying to follow the demo on github , and I see that each node has additional style attribute that positions it somewhere on the page, I can't find how, where or what adds this attribute.

How can I disperse the nodes in a nice way, so that they don't overlap each other?

Answer 1

This library might help: https://github.com/lndb/jsPlumb_Liviz.js

A combination of the jsPlumb library that connects elements with the Liviz.js for the positioning of these elements.

In other words: using jsPlumb for the UI (connecting divs), and Liviz.js for the positioning of these elements (divs).

Answer 2

I've never used this library before, but by looking into the API docs.

Try setting the anchorCount to a smaller value, the default is 60 .

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

This way the anchors will be more spread out in the shape.

You could also check out the StateMachine Connector , which seems to have a proximity option and a curviness , probably both can help you avoid collisions.

I hope I understood your question

Answer 3

Ok, after long hours of banging my head on the wall, i finally got it. It's not perfect, and not wonderful, but essentially it does what i wanted it to, which is: place arbitrary number of nodes, wo them overlapping each other.

First of all, jsPlumb doesn't position the nodes, it leaves it to you, it just connects them. So, before running jsPlumb.connect(), I had to disperse the nodes using js and css.

Here is the code:

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]);
        }
    }
}

What it's doing is:

1. get all nodes i'm going to work with.
2. place first node, save it in set array.
3. place next node, add it to set and check that it doesn't overlap with other nodes in set array, if it does, keep it moving.

When all nodes dispersed, I run jsPlumb.connect(), and voila, they are all connected. I'm not blown with efficiency here, it takes time until it's done. If anyone has any suggestions how to improve it I would love to hear it.