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>

我试图将元素从一个组拖到另一个组。如果我将元素从组（A）拖到组（B），我能够检测到mouseover个事件，但如果我正在从组中拖动元素，则无法检测mouseover个事件（ B）到组（A）。并且这种模式贯穿于进一步的兄弟组，这些组是在拖动元素之后创建的。 IE：我可以拖动并检测从A到C以及从B到C的鼠标移动，但是如果我将C元素拖动到A或B，它将不会检测鼠标悬停。

我已经尝试pointer-events:all和z-index（我确信它甚至不适用于SVG元素）。

示例代码：https://jsfiddle.net/2pku66yu/25/

尝试上下拖动一个框。下游元素亮起，但上游元素不亮。

Answer 1

找到上述示例的合适解决方案，请参阅新代码：https://jsfiddle.net/2pku66yu/47/

echo

Answer 2

您可以在后台创建一个附加组，并在拖动时重新显示节点，以便它们始终位于后台。像这样......

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){
	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){	
  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>

D3.js不同SVG组之间的鼠标事件

2 个答案: