Question

我想使用JSPlumb构建节点连接器应用程序。

现在的想法是会有一个中心的 div 元素可以连接到所有

div 元素沿特定半径的中心 div 的圆周分布 enter image description here

附上相同的屏幕截图就可以用CSS明白了

很抱歉，如果我的问题困惑任何人，但我决定通过尽可能有效地解释它。我会非常感谢有人编辑这个以便更好地理解视角

此致

Answer 1

解决这个问题。

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

}

Answer 2

好吧，我不打算学习JSPlumb，但是我可以告诉你如何解决它的HTML / CSS方面，并指出如何在JS中使用该布局。我不认为有任何实际的非复杂/愚蠢的方式来设置CSS的坐标，因为这里需要数学，但你可以用SVG这样做，这是JSPlumb似乎在其演示中使用的页。

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的旁边。它们只是用来组织你的星星，并以数据半径属性的形式提供一个易于调整的轨道钩子。无需在其上设置任何尺寸或移动它们。

JS：

现在你的JS可以遍历轨道，获取数据半径并将其应用于星形弧度或度数据（可以轻松转换为其中一个）。我现在将几何体留给你，因为这看起来更像是一个标记/ css问题，但让我们假设一个名为setStarCoordinates的函数需要<star dom element object>，<radius>和{{1}参数。

只有星星有高度/宽度尺寸，但它们本身是绝对的，所以它们的容器都可以假设占据一个x，y点。除了几何图形，您必须将星座的顶部和左侧坐标设置为<radians or degrees - your choice>，并将其设置为top + (.5 * height)

关于弧度的链接： http://www.teacherschoice.com.au/maths_library/angles/angles.htm

然后是一个类似这样的循环：

left + (.5 * width)

Answer 3

最简单的方法是让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就可以实现，所以我的解决方案对于静态页面来说没问题。

使用CSS的Galaxy like Structure

3 个答案: