1

Perimeter Anchorsを実装しようとしていますが、最終的に、すべてのノードがシェイプ内にあり、必要に応じて接続され、オーバーラップしないようになりましたが、ページ上でそれらをより適切に分散させる方法を見つけることができません。

ノードのグループが2つあり、グループ1の各ノードは、グループ2の関連するすべてのノードに接続されています。すべてのノードが次々に表示され、接続が互いに重なり合っています。githubのデモをフォローしようとしていますが、各ノードにページ上のどこかに配置する追加のスタイル属性があることがわかりました。この属性を追加する方法、場所、または内容がわかりません。

ノードが互いに重ならないように、ノードを適切に分散させるにはどうすればよいですか？

4

3 に答える 3

1

このライブラリが役立つかもしれません: https://github.com/lndb/jsPlumb_Liviz.js

これらの要素の配置のために要素を Liviz.js と接続する jsPlumb ライブラリの組み合わせ。

つまり、UI (div の接続) には jsPlumb を使用し、これらの要素 (div) の配置には Liviz.js を使用します。

于 2013-03-26T13:44:15.250 に答える
0

さて、壁に頭をぶつけて長時間過ごした後、私はついにそれを手に入れました。それは完璧ではなく、素晴らしいものでもありませんが、基本的には私が望んでいたことを実行します。つまり、任意の数のノードを配置し、それらを互いにオーバーラップさせます。

まず、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（）を実行すると、すべてのノードが接続されます。私はここで効率に驚かされていません、それが完了するまでには時間がかかります。誰かがそれを改善する方法について何か提案があれば、私はそれを聞いてみたいです。

于 2013-01-30T16:59:40.490 に答える