javascript - 为给定的 div 结构强制驱逐库

Question

给定一个像这样的 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 都位于 Canvas 的左上角。我了解到这是因为 jsPlumb 只提供布局图形的功能，但不提供定位图形的功能。

然后我进行了寻宝游戏，发现了许多处理定位的有用库，例如​​ springy、sigma 等。问题是:大多数不对 div 进行操作，而是对某些(对我而言)不透明的 SVG/Canvas 对象图进行操作。

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

如何让元素在可用空间内更均匀地放置，甚至可以让它们每次初始化图形时都以相同的方式排列？

Answer 1

这是用于定位具有连接性的 DIV 的插件:https://github.com/lndb/jsPlumb_Liviz.js基本上插件是从 graphviz 派生的 js库。

您需要通过文本区域(id=dot-src) 将连接信息传递给库。因此，无论何时建立连接，都将连接信息存储在一个字符串中，然后将其传递给 Liviz 库以进行定位。

str='digraph MyGraph {'; // This string will be set to the textarea at the end.

// Whenever connection is created update the string.
jsPlumb.bind("jsPlumbConnection", function(ci) {
            console.log($('#'+ci.sourceId).data("prop").dn+"->"+$('#'+ci.targetId).data("prop").dn);
            str+=ci.sourceId+"->"+ci.targetId+";";
});

// At the end set the string and call Liviz function
$('#dot-src').text(str+"}"); // Set the string
w_launch(); // call the library to position the DIV's based on connectivity.

您可以探索 graphviz 针对不同类型的选项来自定义定位。