D3JS或SNAPSVG拖放限制到加載的SVG形狀區域

Question

任何人都得到任何示例或指針使用D3JS或SNAPSVG捕捉拖動對象到加載的SVG的限制範圍內。

因此，例如，如果我想在導入的Adobe Illustrator svg填充形狀中拖動一個圓形，該形狀比矩形（例如，德克薩斯州）複雜得多。

我估計工作流程是：usa.svg

負荷texas.svg覆蓋的

• 加載地圖ontop的usa.svg
• 用戶的點擊任何地方texas.svg和cricle會出現然後我可以拖動，但只能在texas.svg路徑的限制範圍內。

感謝

d

Answer 1

根據所需的整體解決方案，你可能把一個處理器上的SVG元素之一，所以它只火災或檢查，看看它的權利目標。

所以，你選擇一個狀態，當你點擊它，並把處理程序的狀態，而不是圓（你可以禁用指針事件：無）。

所以你是'拖'的狀態，但移動的圓圈。我們爲此編寫自己的自定義處理程序。

這不是一個完整的解決方案，它需要進一步的邊緣案例測試，比如拖入新的狀態，或者不在地圖之外拖動/點擊。它只是一種可能的方式，通過使用事件本身來限制它的拖拽。

jsfiddle

Snap.load("https://upload.wikimedia.org/wikipedia/commons/3/32/Blank_US_Map.svg", onSVGLoaded) 

function onSVGLoaded(frag) { 
    s.append(frag); 
    s.click(addCircle) 
} 

function addCircle(ev, x, y) { 
    var t = Snap(ev.target) 
    if((t.data('dragEl') == undefined) && (dragging == false)) { // We only want one circle on a state 
    var c = s.circle(x-10, y-10, 10) 
      .attr({ style: 'pointer-events: none; opacity: 0.5' }); 
    t.drag(dragMove, dragStart, dragStop).data('dragEl', c) 
    } 
} 

function dragStart(x, y, ev) { 
    this.data('targetState', ev.target.id); 
} 

function dragMove(dx,dy,x,y,ev) { 
    if(ev.target.id != this.data('targetState')) { return } // Check the event isn't coming from a different state 
    this.data('dragEl').attr({ cx: x-10, cy: y-10 }) 
    dragging = true; 
} 

function dragStop() { // prevent dragend causing new click 
    setTimeout(function(){ dragging = false; }, 300); 
}