代码之家 › 专栏 › 技术社区 › F.P

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

jsplumb graph css html javascript

F.P · 技术社区 · 11 年前

给定如下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);
});

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

Simple-graph

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

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

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

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

1 回复 | 直到 11 年前

MrNobody007 Mahesh Thumar 11 年前

以下是用于定位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公司 用于定制定位的不同类型选项。

推荐文章

Rosie Lomas · 在ggplot中设置数字刻度

1 年前

Mahin Rahman · 我的培训和测试图表保持不变,有人能帮我解释一下,或者解释一下我哪里出错了?

2 年前

nedlaback · 在O(V+E)图中寻找瓶颈边

6 年前

Skampak · R visNetwork:创建新类型的边

6 年前

Habil Ganbarli · 在完整图上进行MST聚类(用于余弦相似性)

6 年前

Vaibhav · 在r Shinny中的Visnetwork中撤消单击事件

7 年前

Anuja · 长度l在R中的最短路径

7 年前

Cbhihe · 优化Neo4j查询,有条件地创建新关系

7 年前

fghjk · 绘制轨迹(python)

7 年前

LBerger · 计算图形图像中的名称使用(TensorBoard)

7 年前