防止两个连接共享同一个锚点

2024-01-01

我正在使用 jsPlumb 来允许用户构建图表。我允许用户拖动这些元素,因此我为每个端点使用锚点集合,让 jsPlumb 在建立连接时从该集合中为我选择“最佳”锚点。我遇到的问题是,我可能有来自任何给定端点的多达十几个连接,因此当许多人最终选择相同的“最佳”锚点时,这些连接将在视觉上分散注意力 - 在图表中创建拥塞的外观。为了解决这个问题,我想告诉 jsPlumb 限制任何两个连接在端点上共享相同的锚点。

可视化我希望实现的目标的最简单方法是在这个演示中:https://jsplumbtoolkit.com/community/demo/dynamicAnchors/index.html https://jsplumbtoolkit.com/community/demo/dynamicAnchors/index.html

开箱即用,此演示中的任何连接都不会重叠。

如果您阅读源代码,您可以看到这是通过拥有一组“源”锚点和一组“目标”锚点来完成的,并且仅从第一组锚点到第二组锚点建立连接。但是,正如我上面所说,我可以有多达十几种类型的连接可以从我的端点连接或连接到我的端点,因此我不想为每个端点指定一组唯一的锚点。这将限制我可以在端点边缘的每个潜在锚点之间留下的间距量,因为每组锚点不能与任何其他锚点集相交。

有没有办法告诉 jsPlumb 我不希望连接共享相同的锚点?


jsPlumb.bind('connection',function(info){
 var con=info.connection;
 var arr=jsPlumb.select({source:con.sourceId,target:con.targetId});
 if(arr.length>1){
    jsPlumb.detach(con);
 }
});

一个简洁的版本,带有更新的 jsPlumb API。

查看是否存在具有相同源和目标的另一个连接,如果存在,则分离新创建的连接。 (jsPlumb 版本 1.5.5 - 1.6.1)

Update:

2.4以后的版本使用jsPlumb.deleteConnection代替jsPlumb.detach

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

防止两个连接共享同一个锚点 的相关文章

随机推荐

  • 绑定日期格式 (ASP.NET MVC)

    在我的 ASP net MVC 应用程序中 我有一个如下所示的视图
  • 在r中按组绘制散点图

    r 中是否有任何函数允许绘制这种按组分隔点的散点图 这是我到目前为止所做的 hours c 0 00 1 78 0 50 2 00 2 80 2 00 0 16 0 34 1 00 1 00 2 00 1 34 1 00 1 10 0 43
  • 是否应该将 .gradle 文件夹添加到版本控制中?

    Gradle 创建一个名为的文件夹 gradle 我应该使用版本控制 即 git 跟踪它吗 更重要的是 为什么 为什么不 我应该跟踪 gradle 目录吗 不 可以放心地忽略它 我为什么要忽略它 它纯粹是为了缓存信息 您不希望它出现在您的存
  • Julia - 将行/列添加到稀疏矩阵

    有没有快速的方法将列 行添加到稀疏矩阵 a sparse 1 2 1 2 1 1 2x2 sparse matrix with 2 Int64 entries 1 1 1 2 2 1 我怎样才能添加 f x a 3 3 1 无需取出所有值并
  • ARM UART0 输入输出。 LPC2138 我做错了什么。 [复制]

    这个问题在这里已经有答案了 read character LDR r0 0xE000C014 LDRB r1 r0 BIC r1 r1 0xFFFFFFF0 CMP r1 0 BEQ read character LDR r6 r1 LDR
  • Maven 测试期间未找到 persistence.xml

    我正在尝试在 Maven 构建期间将测试数据加载到测试数据库中以进行集成测试 persistence xml 正在被复制到target test classes META INF 正确 但在运行测试时出现此异常 javax persiste
  • Jquery变量变量

    存在一些像变量变量这样的概念来打印变量名称或动态调用函数 http php net manual en language variables variable php http php net manual en language vari
  • 检测php编码

    我有以下字符串 如何将此字符串编码为 int UTF 8 文件 PHP 我花了一整天的时间来了解如何做到这一点 我认为这就是您正在寻找的 http www php net manual en function mb detect encod
  • 3D 数组 -> 应用 -> 3D 数组

    它似乎apply仅在一个边距上操作时不会重新组装 3D 阵列 考虑 arr lt array runif 2 4 3 dim c 2 4 3 dimnames list a paste0 a 1 2 b paste0 b 1 4 c pas
  • DTSTART 的 PHP 日期转 iCal 日期格式

    有没有一种简单的方法可以使用 php 日期获取 iCal DTSTART 的正确格式 如果我没有时间 我需要的格式如下 20111008T110000 或 20111008 这个很简单 PHP 日期是否有一种快速的方法来做到这一点 特别是在
  • 错误:捕获异常 [错误:不支持的命令 [addSelection |]

    我正在使用带有 C 的 selenium Web 驱动程序 并在尝试选择可用列表上的项目时收到错误如下 错误 捕获异常 错误 不支持的命令 addSelection 有人可以帮我弄这个吗 有什么解决办法吗 我正在尝试从左侧的列表中选择一个项
  • 将 SQL 查询转换为 django 查询

    我正在尝试将 sql 查询转换为 django 查询 但未能做到这一点 任何人都可以帮助我 select id name round value numeric 2 as value st transform geometry 3857 a
  • 被逐出的对象仍然会向 Hibernate 中的数据库发出更新

    我有一个问题 我驱逐一个实体 但对其进行的更改仍然会更改数据库 这是我的 DAO 中方法的一部分 Entity public class Profile Id GeneratedValue private Long id OneToMany
  • C++ getter 中的 const [重复]

    这个问题在这里已经有答案了 我仍在学习 C 并且我正在阅读所有我必须使用的内容const尽我所能 我认为是出于速度原因 我通常这样写 getter 方法 const bool isReady return ready 但我看到一些IDEA以
  • Linux C 原始套接字 TCP 握手

    我正在尝试使用 C 中的原始套接字 在 Debian 系统上 创建 TCP 连接 但我很难让它工作 它会发送一个数据包 但我没有从服务器得到任何响应 我已经测试并比较了该数据包与从 nmap 发送的数据包 我看不到任何重大差异 这是服务器端
  • jquery ui datepicker 在 beforeShowDay 出现错误

    我正在尝试使用 jquery ui 的日期选择器来实现事件日历 我已经成功安装了日期选择器并且它显示并工作 当我尝试注册时出现问题beforeShowDay处理程序 像这样 datePicker datepicker beforeShowD
  • 序列不包含匹配元素

    我有一个 ASP NET 应用程序 其中使用 linq 进行数据操作 运行时 我收到异常 序列不包含匹配元素 if lstAcl Documents Count gt 0 for i 0 i lt lstAcl Documents Coun
  • Cordova 插件,用于使用 URL 模式从浏览器启动应用程序

    我们可以从 iOS 和 Android 中的浏览器启动应用程序 它是使用 URL 模式实现的 想知道是否有任何 Cordova 插件可以处理上述情况 你有没有尝试过LaunchMyApp PhoneGap 插件 https github c
  • 包装对 malloc()/realloc() 的调用...这是一个好主意吗?

    对于分配 我需要分配一个动态缓冲区 使用malloc 对于初始缓冲区和realloc 如果需要扩大该缓冲区 在我使用 re m alloc 的任何地方 代码如下所示 char buffer malloc size if buffer NUL
  • 防止两个连接共享同一个锚点

    我正在使用 jsPlumb 来允许用户构建图表 我允许用户拖动这些元素 因此我为每个端点使用锚点集合 让 jsPlumb 在建立连接时从该集合中为我选择 最佳 锚点 我遇到的问题是 我可能有来自任何给定端点的多达十几个连接 因此当许多人最终