Question

我想选择拖动元素WHILE下面的元素拖动。应该使用鼠标光标进行选择，不需要对拖动对象进行边界检查，只需要定期鼠标悬停事件。

示例代码：

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.active {
  stroke: #000;
  stroke-width: 2px;
}

</style>
<svg width="960" height="500"></svg>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    radius = 32;

var circles = d3.range(2).map(function() {
  return {
    x: Math.round(Math.random() * (width - radius * 2) + radius),
    y: Math.round(Math.random() * (height - radius * 2) + radius)
  };
});

var color = d3.scaleOrdinal()
    .range(d3.schemeCategory20);

svg.selectAll("circle")
  .data(circles)
  .enter().append("circle")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", radius)
    .style("fill", function(d, i) { return color(i); })
    .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));

function dragstarted(d) {
  d3.select(this).raise().classed("active", true);
}

function dragged(d) {
  d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}

function dragended(d) {
  d3.select(this).classed("active", false);
}

</script>

怎么做？

.on("mouseenter", function() {d3.select(this)... })

不起作用，因为对象位于拖动对象的下方，因此onhover / onmouseenter / etc事件不会激活，我需要它们激活

Answer 1

实现此目的的一种方法是计算圆心之间的距离：

function dragged(d) {
  d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
  d3.selectAll("circle").each (function(c) {
    if (c !== d) {
      var distance = Math.sqrt( Math.pow((d3.event.x - c.x), 2) + Math.pow((d3.event.y - c.y), 2) );
      if (distance < (radius * 2)) {
        d3.select(this).classed("intersecting", true);
      } else {
        d3.select(this).classed("intersecting", false);
      }
    }
  });
}

在这里工作小提琴：https://jsfiddle.net/5n6xxhj6/1/

Answer 2

只需在dragstart上将鼠标事件的“指针事件”设置为“无”，就可以使鼠标事件作用于被拖动对象下方的对象。

function dragstarted(d) {
  d3.select(this).raise().classed("active", true);
  d3.select(this).attr('pointer-events', 'none');
}

别忘了在dragend上将其删除，以便可以再次拖动该对象。

function dragended(d) {
  d3.select(this).attr('pointer-events', null)
  d3.select(this).classed("active", false);
}

以下是@分散的小提琴，以显示它：https://jsfiddle.net/samuel365/10gLvxde/215/

在D3.js中选择拖动元素下面的元素

2 个答案: