问题标签 [jsplumb]

更新 - 1

这是我的 JSFiddle。

在这个例子中。我已经连接了 DOM 加载的前两个 div。

在这行代码中

JSPlumb

我正在通过连接器样式。

查询- 我想将源端点和目标端点显示为绿色和 Ping。现在它显示为蓝色。

原来的

我最近接手了一个被其他开发人员留下的未完成的开发项目。在项目中，我们需要能够在 2 个元素之间绘制连接器。为此，原始开发人员使用了 jsPlumb。当我手动创建连接器时，该库工作正常并产生结果。但现在我想做的是动态创建一个连接器。阅读 jsPlumb 的文档我试图这样做，但它没有产生我想要的结果。

这就是我手动创建时的情况（注意目标元素处的颜色和箭头）

但是如果我自动创建它，我不会得到这个颜色和箭头。这是我为测试而创建的小提琴。我正在做的是调用jsPlumb.connect();和传递参数。

谁能指出错误在哪里？

问候

杰汉则布·马利克

我这里有一个 JS 小提琴

在本文档中，我有两个具有连接器的容器。我的问题是如何添加一个新容器，该容器将具有像这样的连接器，在单击按钮时会有绿色和粉红色的圆点。

HTML

jQuery

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

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

开箱即用，此演示中的所有连接都不会重叠。

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

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

这是我在 JS Fiddle 中的演示

HTML

jQuery

查询 - 如何限制在 JS-Plumb 的同一 div 中建立连接？

背景：我目前正在使用 JavaScript、jQuery和Backbone.js（支持者需要这些）为 Web 应用程序开发客户端。
这是一个以图形模式（主要通过表示数据的交互式图表）可视化和编辑数据的应用程序。

术语：所述数据是多个文档的格式，每个文档包含一个项目列表。
对于这个问题，让项目由标识符、文本描述和指向其他文档中项目的链接组成。链接应该是对称的（i1 -> i2当且仅当i2 -> i1也存在时才存在）。

当前目标：在这个阶段，应用程序应该能够读取两个文档，并排显示两个列表，然后根据它们的链接绘制线条，连接两个文档之间的项目。
这些行应该是可编辑的。换句话说，用户应该能够创建新链接，或删除现有链接（反映项目模型上的更改）。

这些文档可能有点长，比如几十个项目（在现实场景中可能有几百个）。当然，页面将是可滚动的，以允许用户查看所有内容。

此外，为了方便用户，应该有一个滑块来缩放视图（允许放大/缩小效果，因此为用户提供了全局和局部视图，后者更适合编辑，前者更适合分析）。
此外，应该允许用户隐藏特定项目（当项目有很多链接时很有用，创建视觉垃圾）。

我设法做到了：

• 读取数据并将其映射到 Backbone 模型和集合；
• 并排显示两个文档（主干视图），并带有项目连接；
• 允许在这些连接上进行交互（拖放以创建线条，单击以删除），反映骨干模型的变化；
• 隐藏特定项目；
• 规模效应。

在遇到jsPlumb之后，我使用SVG实现了这一点。

手头的问题：应用程序仍然需要调整（强调缩放效果）。无论如何，我发现 jsPlumb 使用起来很舒服。但是，在使用滑块时，渲染性能似乎有些不足（可能是滑块步长太小，从而触发了太多事件）。

支持者建议我尝试使用桑基图来表示这种数据。他们还建议我尝试基于Raphaël.js的 tamc 的 Sankey。 当然，视觉因素也有贡献。

我的问题：这个库是否与 Backbone 有很好的兼容性？可能，如果我使用生成的 SVG 元素作为主干视图的元素。
另外，两者中的任何一个都比另一个具有显着的渲染性能优势吗？

最后一点，是否还有其他库更适合这种情况，值得花时间重写应用程序，我可能会向支持者建议？

这是我的 JSFiddle

查询 - 当我尝试在 ID A1 和 B 之间建立连接时，连接粉色线显示远离 Div B。突出显示的粉色线下方远离 Div B。这就是问题所在

jQuery

HTML

将 jsplumb 连接拖到浏览器顶部时如何创建滚动？我在网上搜索但找不到创建卷轴的解决方案。

我有一个“画布”，允许用户在其中添加可拖动的框并将它们与 jsPlumb 连接。我想让他们在某个时间点删除其中一个框。为了解决这个问题，我首先分离所有连接并从目标元素中删除端点，这很好

然后我删除实际的 DOM 元素：

在这一点上，jsPlumb 开始吓坏了，不允许我再拖动剩余的元素：

我可以继续调整框的大小并建立新的连接，但拖动元素总是失败并发出上述错误。

有什么我做错了吗？换句话说，在“可拖动”环境中删除 jsPlumb 元素是否有更合适的方法？

I'm interested in using jsPlumb to create a workflow designer. It looks like all jQuery, so I'm assuming I'd have to write the plumbing (excuse the pun) to persist changes to connections and write out the XML corresponding to a workflow definition to the design canvas.

Question #1 - is there a .NET library out there for jsPlumb? Question #2 - I watched this done in a steering committee meeting for Orchard CMS. Is the Orachd team already doing this? Should I just wait for 1.7 and look at the source code?

！[我想移动我的jsplumb源及其目标，因为我动态绘制这些 jsplumb，当我移动每个源时，它的目标也应该随之移动？1

如果有办法移动我的 Jsplumb 的每个源及其目标，请帮助我下载图像并提供帮助* 当我拖动任何 Jsplumb 源时，它应该与它的目标一起移动？*