события D3.js мыши между различными группами SVG

Question

У меня есть структуру SVG следующим образом:

<svg> 
    <g class="A"> 
     <rect id="A1" /> 
     <rect id="A2" /> 
     <rect id="A3" /> 
    </g> 
    <g class="B"> 
     <rect id="B1" /> 
     <rect id="B2" /> 
     <rect id="B3" /> 
    </g> 
    <g class="C"> 
     <rect id="C1" /> 
     <rect id="C2" /> 
     <rect id="C3" /> 
    </g> 
</svg> 

Я пытаюсь перетащить элемент из одной группы в другую. Я могу обнаружить события mouseover, если я перетаскиваю элемент из группы (A) в группу (B), но он не может обнаружить события mouseover, если я в процессе перетаскивания элемента из группы (B) в группу (A). И этот шаблон следует за дальнейшими группами братьев, которые создаются после того, из которого перетаскивается элемент. IE: я могу перетаскивать и обнаруживать мыши, идущие от A до C и от B до C, но он не будет обнаруживать наведение мыши, если я перетаскиваю элемент C в A или B.

Я уже пытался pointer-events:all и z-index (что, я уверен, даже не работает для элементов SVG).

Пример кода: https://jsfiddle.net/2pku66yu/25/

Попытка перетащить одну коробку вверх и вниз по течению. Нижестоящие элементы загораются, но вышерасположенные элементы этого не делают.

Answer 1

Вы могли бы создать дополнительную группу в фоновом режиме и узлы изменят родитель на сопротивлении, так что они всегда находятся в фоновом режиме. Как и ...

var svg = d3.selectAll("body").append("svg").attr("width", "100%").attr("height", "100%"); 
 

 
var data = [ {gind:0, class:"Z",elements:[]},{gind:1,class:"A",elements:[1,2,3]}, {gind:2,class:"B",elements:[1,2,3]} , {gind:3,class:"C",elements:[1,2,3]} ] 
 

 
var groups = svg.selectAll("gs").data(data).enter().append("g").attr("class",function(d){ return d.class; }).attr("transform",function(d){ return "translate("+d.gind*50+","+d.gind*50+")"}); 
 

 
var elements = groups.selectAll(".element").data(function(d){ return d.elements.map(function(i){ return { id:i , x:i*10, y:i*10 } }); }).enter().append("rect").attr("class","element").attr("transform",function(d){ 
 
console.log(d) 
 
return "translate("+d.x+","+d.y+")" 
 
}).attr("width",10).attr("height",10).style("fill","#cccccc") 
 

 
var draghandle = d3.behavior.drag().origin(Object).on("drag", dragfunc).on("dragstart", dragstart).on("dragend", dragend); 
 
var dragging_elem = false; 
 

 
elements.on("mouseover",function(d){ 
 
\t d3.select(this).style("fill","red"); 
 
}).on("mouseout",function(d){ d3.select(this).style("fill","#cccccc") }).call(draghandle) 
 

 
var prevParent; 
 
var z = document.getElementsByClassName("Z")[0]; 
 

 
function dragstart(d) { 
 
    prevParent = d3.select(this).node().parentNode; 
 
    d3.select(z).attr("transform", prevParent.getAttribute("transform")); 
 
    z.appendChild(d3.select(this).node()); 
 
} 
 
function dragend(d) { 
 
    prevParent.appendChild(d3.select(this).node()); 
 
} 
 
function dragfunc(d){ \t 
 
    d.x = d3.event.x 
 
    d.y = d3.event.y 
 
    d3.select(this).attr("transform","translate("+d3.event.x+","+d3.event.y+")"); 
 
}

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 2

Найден достойное решение для приведенного выше примера, см нового кода: https://jsfiddle.net/2pku66yu/47/

var mouse_loc = d3.mouse(svg.node()) 
    var prev = d3.select(this).style("pointer-events"); 
    d3.select(this).style("pointer-events","none"); 

    var el = document.elementFromPoint(mouse_loc[0]+5, mouse_loc[1]+5); 

    e2 = document.createEvent('MouseEvent'); 
    e2.initMouseEvent("mouseover",e.bubbles,e.cancelable,e.view, e.detail,e.screenX,e.screenY,e.clientX,e.clientY,e.ctrlKey,e.altKey,e.shiftKey,e.metaKey,e.button,e.relatedTarget); 

    if (el) { 
     el.dispatchEvent(e2); 
    } 

    d3.select(this).style("pointer-events","all");