jsplumb.connect不適用於動態創建的端點

我需要幫助來了解jsplumb.connect概念。我正嘗試從xml文件創建端點並嘗試連接端點。但我能夠生成端點，但不能連接。jsplumb.connect不適用於動態創建的端點

XML文件

<?xml version="1.0" encoding="utf-8" ?> 
<apps> 
<source nodeStyle="Dot" nodeRadius="15">#66CCFF</source> 
<target nodeStyle="Dot" nodeRadius="15">#66CCFF</target> 
</apps>

HTML文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script> 
    <script type="text/javascript" src="../js/jquery.jsPlumb-1.3.16-all-min.js"></script> 
    <script type="text/javascript"> 


$(document).ready(function() 
     { 


var i=0; 
var nodeName, nodeVal,nodeStyle,nodeRadius; 

    $.get('data1.xml', function(d){  
     $(d).find('apps').each(function(){ 
jsPlumb.Defaults.EndpointStyles = [{ fillStyle:"none" }, { fillStyle:"none" }]; 
while($(this).children()[i].nodeName!=null) 
{ 

nodeName = $(this).children()[i].nodeName; 
nodeVal = $(this).find($(this).children()[i].nodeName).text(); 
nodeStyle = $(this).find($(this).children()[i].nodeName).attr('nodeStyle'); 
nodeRadius = $(this).find($(this).children()[i].nodeName).attr('nodeRadius'); 

      var nodeName = jsPlumb.addEndpoint(nodeName, { 
       overlays: [["Label", { label: nodeName, id: "label"+nodeName}]],    
     paintStyle: { fillStyle: nodeVal}, 
       endpoint: [nodeStyle , { radius: nodeRadius }] 
      }); 
i++; 
} 

jsPlumb.bind("ready", function() { 

      jsPlumb.connect({ 
       source: source, target: target, paintStyle: { lineWidth: 10, strokeStyle: '#66CCFF' },     
endpoint: ["Dot", { radius: 15}], anchor: "BottomCenter", 
       connector: "Straight", 
       detachable: false, 
       overlays: [ 
     ["Label", { 
      fillStyle: "rgba(100,100,100,80)", 
      color: "white", 
      font: "12px sans-serif",    
      borderStyle: "black", 
      borderWidth: 2 
     }], 
     ["Arrow", { location: 0.5}] 
    ] 

      }) 

}); 

     }); 
    }); 
}); 
    </script> 
</head> 
<body> 
    <div id="source" style="position: absolute; left: 100px; top: 250px;"> 
    </div> 
    <div id="target" style="position: absolute; left: 600px; top: 250px;"> 
    </div> 

</body> 
</html>

來源

2013-04-29 Muthuraman

做任何一件有這個答案？請幫忙 – Muthuraman 2013-04-30 13:23:57

這可以通過先設定每個端點的uuid參數，像這樣以編程方式來實現：

jsPlumb.addEndpoint("0",{uuid:"ep0_0", isSource:true, isTarget:true}); 
jsPlumb.addEndpoint("1",{uuid:"ep1_0", isSource:true, isTarget:true});

然後將它們連接起來因此

jsPlumb.connect({ uuids:["ep0_0","ep1_0"] }); 

//With more options looks like... 
//jsPlumb.connect({ uuids:["ep0_0", "ep1_0"], endpoint: endpoint, anchors: flat_to_flat_anchors, overlays:overlays });

的HTML：

<div id="0" class="window"></div> 
<div id="1" class="window"></div>

裸骨JS：

jsPlumb.addEndpoint("0",{uuid:"ep1"}); 
jsPlumb.addEndpoint("1",{uuid:"ep2"}); 
jsPlumb.connect({ uuids:["ep1","ep2"] });

來源

2014-03-31 21:04:13 radtek

jsplumb.connect不適用於動態創建的端點

回答

相關問題