0

JSPlumbを使用してノードコネクタアプリケーションを構築したいと思います。

今のアイデアは、すべてに接続できる中央のdiv要素があるということです

特定の半径 で中央divの円周に沿って分布するdiv要素ここに画像の説明を入力してください

同じもののスクリーンショットを添付することは、CSSで簡単に行うことができます

私の質問が誰かを混乱させたら申し訳ありませんが、私はそれをできるだけ効率的に説明することによって決定します。

よろしく

4

3 に答える 3

2

これをいじります。

http://jsfiddle.net/A7pY2/2/

HTML:

<div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS:

#container {
     position: absolute;
    top: 300px;
    left: 300px;
}
#container div {
    position: absolute;
    background-color: #eee;
    width: 50px;
    height: 50px;
}

JavaScript:

startCar();

function startCar() {
    var items = document.getElementById("container").getElementsByTagName("div").length;
    var angles = new Array(items);
    var rx = 200;
    var ry = 100;

    initCar();



    function initCar() {
        var content = document.getElementById("container");
        var divs = content.getElementsByTagName("div");
        var xpos, ypos;
        for(var i = 0; i < items; i++) {
            angles[i] = ((Math.PI * 2) / items) * i;
            xpos = Math.cos(angles[i]) * rx;
            ypos = Math.sin(angles[i]) * ry;
            divs[i].style.left = xpos + 'px';
            divs[i].style.top = ypos + 'px';
            divs[i].style.zIndex = parseInt(ypos);
        }
    }

}
于 2012-08-27T16:11:10.223 に答える
1

JSPlumb について学ぶつもりはありませんが、JS でそのレイアウトを有利に使用する方法についての指針を示して、HTML/CSS 側を解決する方法を説明できます。ここでは数学が必要なので、CSS のみで座標を設定するための実用的で複雑でない/ばかげた方法はないと思いますが、JSPlumb がデモで使用しているように見える SVG でそれを行うことができるかもしれませんページ。

CSS:

#central_div { position:relative; overflow:visible; }
/* or absolute or fixed */

.orbit { overflow:visible; }
/* no position set for orbits so stars anchor to #central_div */

.star { position:absolute; width:20px; height:20px; }

HTML:

<div id="central_div">

    <div class="orbit" data-radius="50">
        <div class="star" data-radians="1.23"></div>
        <div class="star" data-radians="2.22"></div>
        <div class="star" data-radians="4.10"></div>
        <div class="star" data-radians="6.01"></div>
    </div>

    <div class="orbit" data-radius="100">
        <div class="star" data-radians="1.23"></div>
        <div class="star" data-radians="2.22"></div>
        <div class="star" data-radians="4.10"></div>
        <div class="star" data-radians="6.01"></div>
    </div>

</div>

注: 軌道の div はすべて中央の div の横にあることに注意してください。これらは、星を整理し、data-radius 属性の形で簡単に調整できるオービット フックを提供するためだけに存在します。それらに寸法を設定したり、移動したりする必要はありません。

JS:

これで、JS は軌道をループし、data-radius を取得して、それをスター ラジアンまたは度数データに適用できます (どちらか一方に簡単に変換できます)。これはマークアップ/CSS の質問のように思えるので、今のところジオメトリはあなたに任せますが、引数として、、およびsetStarCoordinatesを取る関数が呼び出されると仮定しましょう。<star dom element object><radius><radians or degrees - your choice>

星のみに高さ/幅の寸法がありますが、星自体は絶対的なものであるため、それらのコンテナはすべて単一の x、y ポイントを占めると想定できます。ジオメトリとは別に、星の上と左の座標を astop + (.5 * height)と leftに設定する必要がありますleft + (.5 * width)

ラジアンに関するリンク: http://www.teacherschoice.com.au/maths_library/angles/angles.htm

そして、次のようなループです。

var orbits = document.querySelectorAll('#central_div .orbit'),
i = orbits.length;

while(i--){
    var radius = orbits[i].getAttribute('data-radius'),
    stars = orbits.getElementsByClassName('star'),
    //or use querySelectorAll again if you're supporting IE8
    j = stars.length;

    while(j--){
        var thisStar = stars[j],
        radian == thisStar.getAttribute('data-radian');
        setStarCoords(thisStar, radius, radian);
    }
}
于 2012-08-27T17:06:11.533 に答える
0

これを行う最も簡単な方法は、点線の背景画像を持つ DIV を作成することです。

次に、DIV、A タグ、またはこの上に絶対に配置されるものを追加します。

<div id="my-background-div">
    <a href="#">Node #1</a>
    <a href="#">Node #2</a>
    <a href="#">Node #3</a>
    <a href="#">Node #4</a>
</div>

...等々。

プログラムによる解決策ではありませんが、単純なCSSだけではそれが可能だとは思わないので、上記の私の解決策は静的ページには適しています.

于 2012-08-27T14:25:06.493 に答える