jsPlumb 工具包答案

【问题标题】：jsPlumb toolkitjsPlumb 工具包
【发布时间】：2013-02-09 14:16:23
【问题描述】：

jsPlumb 工具包中是否可以根据要绘制和连接的对象的数量和类型来动态定位内容。我的意思是目前他们提供的example 使用 css 来定位每个节点，当我们动态生成可视化时这不是一个好的选择，因为我们不知道网络中有多少对象（节点）可用。是否可以使其动态化？

注意：jsplumb 中的新手。

【问题讨论】：

只需使用 JS 动态定位元素来设置它们的顶部/左侧
jsPlumb 中有这样的默认选项吗？你能给我一个可能有助于开发我的示例代码的东西吗？我正在尝试绘制一个机构的网络拓扑。有时可能会出现新节点，也可能会被删除。节点详细信息由 snmp 提供

标签： javascript jquery-ui jsplumb

【解决方案1】：

没有。由你来定位你的元素。 jsPlumb 只是简单地“探测”它们。

【讨论】：

但应该有一些方法可以自动化它。毕竟它是一个成熟的插件
如果自动图形布局对您很重要，我建议使用此处建议的图形框架：stackoverflow.com/a/2366237/881011

【解决方案2】：

是的，这是可能的（好吧，在接受答案四年后，但仍然如此）。考虑如何首先绘制节点。例如，如果您想绘制树形图或组织结构图，您可能希望通过设置表面选项布局类型来使用hierarchical layout，如下所示：

var toolkit = jsPlumbToolkit.newInstance();

//... load data...

var surface = toolkit.render({
    container:"someElement",
    layout:{
    type:"Hierarchical",
    parameters:{
      padding:[ 50, 50 ]
    }
  }
});

当使用这种布局类型时，jsplumb 会自动动态定位节点。

【讨论】：