標籤：style blog io ar color os sp java for
自以為會了D3就可以無敵於可視化了，不過項目中卻要求用jsPlumb。在我看來，這就是一個給元素畫連接線的工具。
<!DOCTYPE html><html><head><title>jsPlumb</title><style>.item{width:100px;height:50px;border:3px solid green;position: absolute;}.item1{left:400px;top:100px; }.item2{left:300px;top:250px; }.item3{left:500px;top:250px; }.item4{left:200px;top:400px; }.item5{left:400px;top:400px; }.item6{left:600px;top:400px; }</style></head><body><div class=‘demo‘ id=‘demo‘><div class=‘item item1‘ id=‘item1‘>1</div><div class=‘item item2‘ id=‘item2‘>2</div><div class=‘item item3‘ id=‘item3‘>3</div><div class=‘item item4‘ id=‘item4‘>4</div><div class=‘item item5‘ id=‘item5‘>5</div><div class=‘item item6‘ id=‘item6‘>6</div></div><script src="jquery-2.1.1.js"></script><script src="jquery-ui-1.9.2.js"></script><script src="jquery.jsPlumb-1.4.1-all.js"></script><script>jsPlumb.ready(function(){var color = ‘#222‘;var instance = jsPlumb.getInstance({//連線Connector:[‘Bezier‘, {curviness:50}],//拖動時的示範DragOptions:{cursor:‘pointer‘, zIndex:2000},//連接線的樣式PaintStyle:{strokeStyle:‘steelblue‘, lineWidth:3},//連接點的樣式EndpointStyle:{radius:6, fillStyle:‘#222‘},//hover時線樣式HoverPaintStyle:{strokeStyle:‘green‘},//hover時點的樣式EndpointHoverStyle:{fillStyle:‘red‘},Container:‘demo‘ //這裡是container的id，而不是class。});instance.doWhileSuspended(function(){var arrowCommon = {foldback: .7, fillStyle: color, width: 14},overlays = [[‘Arrow‘, {location:.8}, arrowCommon],// [‘Arrow‘, {location:.3, direction:-1}, arrowCommon],];var windows = jsPlumb.getSelector(‘.item‘);for(var i = 0; i<windows.length;i++){instance.addEndpoint(windows[i], {uuid:windows[i].getAttribute(‘id‘)+‘-bottom‘,anchor:‘Bottom‘,maxConnections:-1});instance.addEndpoint(windows[i], {uuid:windows[i].getAttribute(‘id‘)+‘-top‘,anchor:‘Top‘,maxConnections:-1});}//connect 函數instance.connect({uuids:[‘item3-bottom‘,‘item6-top‘], overlays:overlays, detachable:true, reattach:true});instance.connect({uuids:[‘item1-bottom‘,‘item2-top‘], overlays:overlays});instance.connect({uuids:[‘item1-bottom‘,‘item3-top‘], overlays:overlays});instance.connect({uuids:[‘item2-bottom‘,‘item4-top‘], overlays:overlays});instance.connect({uuids:[‘item2-bottom‘,‘item5-top‘], overlays:overlays});//jquery ui裡的draggable功能instance.draggable(windows);});jsPlumb.fire(‘jsPlumbdemoLoaded‘, instance);})</script></body></html>
這是一個簡單的小例子。是官網中一個demo的簡化版，在學習了網上的教程之後，給官網的例子加了自己的注釋。
給元素加連接點，給連接點加連接線，給連接線加各種裝飾。需要的樣式，canvas和SVG中都有，需要的動作，就是拖動。
jsPlumb學習筆記
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
