标签: jsplumb

更新 - 1

这是我的JSFiddle.

在这个例子中.我在DOM加载上连接了前两个div.

在这行代码中

JSPlumb

jsPlumb.connect
            (
                {
                    source: 'A',
                    target: 'B',
                    anchors: ["RightMiddle", "LeftMiddle"],
                    paintStyle: { strokeStyle: "#ff9696", lineWidth: 8 },
                    connector: ["Flowchart", { curviness: 63}],
                    connectorStyle: [{
                        lineWidth: 3,
                        strokeStyle: "#5b9ada"
                    }],
                    hoverPaintStyle: { strokeStyle: "#2e2aF8", lineWidth: 8 }
                }
            );

我正在传递连接器样式.

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

原版的

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

这是我手动创建时的注意事项(注意目标元素的颜色和箭头)

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

jsPlumb.connect({
    source: "page-1",
    target: "page-2",
    anchors: [
        [1.06, 0.5, 0, 1],
        [-0.06, 0.5, 0, 0]
    ],
    endpoint: …

这是我的要求:

我需要创建一个人的不同表示之间的链接的可视化.我认为下面的图像表明相当清楚.

此外,这些矩形还包含一些关于人的表示的数据(例如人口统计和地点).我还需要能够在单击框或它们之间的链接时处理事件,作为一种管理工具(例如,双击链接以删除它,或沿着这些行的某些东西).同样重要的是,由于人数和链接的数量会有所不同,我需要通过像图像显示的大致等距的方式将人们隔开来显示它.

什么是javascript库可以实现这一目标？我做了一些研究,但还没有发现可以干净利落的事情,但我不是这些图书馆的专家.

以下是我看过的内容:

Arbor js:可以动态创建图形的间距和链接,但我负责渲染所有的视觉效果,并且没有像单击链接那样的钩子.

jsPlumb:轻松地在元素之间创建连接并很好地绘制它们,但似乎没有解决任何布局问题.因为我不知道屏幕上会有多少人,所以我必须能够将它们等距离分开,这似乎不是jsPlumb的关注点.

D3.js:这创建了一个很好的可视化,我需要的间距,但我不知道如何在每个节点内显示数据或在链接或框上执行类似鼠标事件的操作.

我感觉有点失落,所以我希望有人可以指点一些可以帮助我的东西,或者让我看一下这些图书馆中的一个例子,告诉我我想要的东西是可能的.

我使用 jsplumb 创建了一个非常简单的设置，它显示一个顶部元素，然后将该元素连接到屏幕上的其他六个元素。

我想知道是否可以为连接线设置动画，使它们看起来从顶部元素开始生长，而不仅仅是出现。

这是我复制的用于创建简单布局的代码。

jsPlumb.ready(function() {
    jsPlumb.importDefaults({
            // notice the 'curviness' argument to this Bezier curve.  the curves on this page are far smoother
            // than the curves on the first demo, which use the default curviness value.            
            Connector : [ "Bezier", { curviness:50 } ],
            PaintStyle : { strokeStyle:"#000000", lineWidth:6 },
            EndpointStyle : { radius:1, fillStyle:"#000000" },
            HoverPaintStyle : {strokeStyle:"#ec9f2e" },
            EndpointHoverStyle : {fillStyle:"#ec9f2e" },            
            Anchors :  [ "BottomCenter", "TopCenter" ]
        });

        jsPlumb.connect({source:"starterPoint", target:"window1"});
        jsPlumb.connect({source:"starterPoint", target:"window2"});
        jsPlumb.connect({source:"starterPoint", target:"window3"}); …

我们正在研究一个使用JSPlumb进行工作流呈现并维护包含节点（id，位置，文本等）和连接的单独数据模型的项目，并使用jsPlumb.bind将其与事件同步

当我重新创建连接时，我在调用带有源和目标参数的jsPlumb.connect，但似乎ID是在后台创建的，因此与从数据模型加载的ID不匹配。这样做很好，除非在拆卸时我不想通过ID从模型中删除该连接...

有什么方法可以手动设置连接器的ID？

谢谢

我正在使用jsPlumb.我有.project容纳.taskdiv的容器.这些.taskdiv是jsPlumb连接的源/目标.该.project容器是可拖动.

http://jsfiddle.net/8Af7s/

在创建.taskdiv(使用jQuery创建)时,会为div分配源/目标属性:

 // Makes the task div a possible target (i.e. connection can be dragged to)
 jsPlumb.makeTarget(newState, {
   anchor:["Continuous", { faces:["left", "right"] } ]
 });

 // Makes the task div a possible source (i.e. connection can be dragged from)
 jsPlumb.makeSource(newState, {
   anchor:["Continuous", { faces:["left", "right"] } ]
 });

Run Code Online (Sandbox Code Playgroud)

凡.task为newState

 var newState = $('<div>').attr('id', id).addClass('task')

Run Code Online (Sandbox Code Playgroud)

现在要删除一个任务,我有一个静态按钮,它只是分离与该任务的所有连接并将其删除:

 $('#removetask1').click(function(e) {
     jsPlumb.detachAllConnections($('#task1'));
     $('#task1').remove();
     //jsPlumb.repaintEverything();
 })

Run Code Online (Sandbox Code Playgroud)

task …

我在jQuery中使用jsPlumb

我想知道是否有一种方法可以在容器内拖放元素时以及之后获取元素的位置？

我正在做一个交叉，目前正在工作，但在保存位置之前不会重绘我的连接点和锚点。

<script type='text/javascript'>
$(window).load(function(){
    $('#flowchartdrag".$id_kurs."').draggable({
        drag: function() {
            var parentLeft = $('#flexwrap".$dynamiccounter."').position().left;
            var parentTop = $('#flexwrap".$dynamiccounter."').position().top;
            var offset = $(this).position();
            var xPos = (offset.left - parentLeft);
            var yPos = (offset.top - parentTop );
            $('#x".$id_kurs."').val(xPos);
            $('#y".$id_kurs."').val(yPos);

        },
        stop: function(event, ui) {
            // Show dropped position.
            var parentLeft = $('#flexwrap".$dynamiccounter."').position().left;
            var parentTop = $('#flexwrap".$dynamiccounter."').position().top;
            var Stoppos = $(this).position();
            var left = (Stoppos.left - parentLeft);
            var top = (Stoppos.top - parentTop);
            $('#x".$id_kurs."').val(left);
            $('#y".$id_kurs."').val(top);
        },
        containment: $('#flexwrap".$dynamiccounter."')
    });
});

我试图用

    jsPlumb.repaint;

但是那是行不通的 …

我试图使用jsplumb来显示两个组件之间的连接.

我最终做的是使用jQuery来获取UI元素的句柄并使用它来渲染连接,使用jsplumb库.如下:

JsPlumb配置

if( typeof jsPlumb !== 'undefined' && jsPlumb !== null ) {
  jsPlumb.ready(function() {
    jsPlumb.deleteEveryEndpoint();
    jsPlumb.setContainer(this._container);
    jsPlumb.Defaults.PaintStyle = { strokeStyle:'#339900', lineWidth:2, dashstyle: '3 3'};
    jsPlumb.Defaults.EndpointStyle = { radius:7, fillStyle:'#339900' };
    jsPlumb.importDefaults({
      Connector : [ 'Flowchart', { curviness:0 } ],
      ConnectionsDetachable:true,
      ReattachConnections:true
    });
    jsPlumb.endpointClass = 'endpointClass';
    jsPlumb.connectorClass = 'connectorClass';
  });
}

Js-Plumb用法

jsPlumb.connect({
  source: $('#'+entityFrom+'Panel'),
  target: $('#'+entityTo+'Panel'),
  anchors: ['RightMiddle', 'LeftMiddle']
});

从angular2上的各种博客,我明白使用带有ng2的jQuery是一种反模式.

某些人可以提供替代或更好的设计方法来使用带有angular2或任何其他类似库的jsPlumb.

我在脚本标签下的 .html 文件中尝试了 jsplumb 脚本。这工作正常。

 <body>
    <div id="q-app"></div> 
    <!-- built files will be auto injected -->
  <script>
   jsPlumb.ready(function() {
            jsPlumb.connect({
                source:"item_left",
                target:"item_right",
                endpoint:"Rectangle"
            });
            jsPlumb.draggable("item_left");
            jsPlumb.draggable("item_right");
        });
  </script>
  </body>

但是现在我想将此 jsplumb 代码/脚本集成到 .vue 文件中。我尝试将此脚本放在 .vue 文件中的脚本标记下，但除了一个零错误的空白页面外，我没有得到任何输出。我怎样才能继续？。用一些简单的例子来指导我。

我想在jsPlumb中使用一个很棒的箭头.

这就是我要的:

这就是我得到的:

如何更改设置？

这是我目前使用的:

PaintStyle: { stroke: "#f00", strokeWidth: 20 },
connector: ["Straight"],
connectorOverlays:[["Arrow", { location:1, width:70, length:70 } ]]

我以前一直在使用SVG中的箭头.在那里,我可以简单地改变头部的SVG代码向前移动,使得线的末端(线端点的坐标)在箭头三角形内.我似乎无法在jsPlumb中执行此操作.

我觉得很难传达这个问题.

这是下一个尝试:

我正在尝试使用滚动缩放.我有一个内部有#mainDiv多个.foo表与jsPlumb端点.当用户滚动时,#mainDiv应该保持相同的大小并且表应该调整大小,这实际上会发生,但是表的端点不会改变它们的大小和位置.看看这个jsFiddle:

https://jsfiddle.net/vaxobasilidze/cg3hkde7/9/

小提琴很大,但我们只需要第一个javascript函数.将几个项目拖到右侧,添加新链接并滚动.表将改变大小,但端点保持不变.如何使用端点解决此问题？

端点不是这些表的一部分,但它们是jsPlumb库的一部分,jsPlumb库具有setZoom()函数用于它的对象.这个功能不起作用,我想知道原因.连接器也应该改变它们的位置.

此外,应用程序也必须在触摸设备上工作.setZoom是否适用于触控设备的捏拉缩放,我该如何实现？