为给定的div结构强制扩展库

给定如下HTML结构:

<div id="canvas">
    <div class="group group-normal" id="1">hello world</div>
    <div class="group group-infiltrated" id="2">whats up dogue</div>
</div>

我目前使用jsPlumb从该结构创建一个图:

$(function() {

    jsPlumb.Defaults.Container = $("div#canvas");

    jsPlumb.draggable($("div.group"), {
        containment: $("div#canvas")
    });

    var stateMachineConnector = {               
        connector: "Bezier",
        paintStyle: { lineWidth: 2, strokeStyle: "#056" },
        endpoint: "Blank",
        anchor: "Continuous",
        overlays:[ ["PlainArrow", { location: 1, width: 15, length: 12 } ]]
    };

    jsPlumb.connect({
        source: "1",
        target: "2"
    }, stateMachineConnector);
});

这已经给了我一个漂亮的、可拖拽的图表:

问题是,在初始化图形时 div s在画布的左上角。我了解到,这是因为jsPlumb只提供了布局图的功能,而不提供定位图的功能。

然后,我进行了一次寻宝活动,发现了许多有用的图书馆,如springy、sigma等。问题是:大多数不在div上运行,而是在一些(对我来说)半透明的SVG/画布对象图上运行。

我非常喜欢jsPlumb,并希望继续使用它。我唯一需要的是其他库中所有元素的初始定位。

我如何使元素在可用空间上更均匀地放置,甚至可能以使它们排列的方式 每次初始化图形时都是如此 ?