d3.js - D3 拖动和 mouseup 事件

Question

我正在使用 d3 来选择矩形。我试图让拖动结束和 mouseup 事件在矩形上触发。看起来拖动事件会阻止 mouseup 事件。 (它们不会阻止鼠标悬停事件)我已经将鼠标向上绑定(bind)并将拖动事件绑定(bind)到矩形。当我单击矩形时，不会触发 mouseup 事件，只会触发拖动端。我尝试了 event.stopPropagation() 和 preventDefault() 的不同组合来控制触发哪些事件。我还尝试将拖动事件设置为空。这些都不起作用。如何让拖动端和 mouseup 在 mouseup 时触发？

var target = d3.select('#test');
target.on('mouseup', (d) => alert('mouseup'))
 .call(d3.drag()
   .on("start", function () {
     console.log('start')
   })
   .on("drag", function () {
     console.log('drag');
   }).on("end", function () {
     alert('end');
     //d3.select(window).on('click.drag', null);
   })
);

<div id='test' />

#test { background:red; position:absolute; height:40px; width:40px; }

此功能在 D3 v3 中有效，但在 v4 中无效

编辑:澄清一下，我的问题是当拖动事件触发时，页面上的 mouseup 事件被禁用(以及所有元素)。当您从一个形状拖动到另一个形状时，我想识别目标元素(因此需要 mouseup)。

Answer 1

当您单击一个元素并拖动到另一个元素时，我想检测第二个元素是什么。拖动对象时不会触发 mouseup，但会触发 mouseover 和 mouseout。我使用这些函数来设置 mouseover_obj 变量。这样在你拖动之后，当拖动结束事件执行时，你可以访问那个对象。如果它不为 null，那么它的值就是鼠标悬停的形状。

这是一些代码: JsFiddle for D3 Mouseup while Drag

var mouseover_node = null;
var svg = d3.select('body').append('svg').attr('width', 1000).attr('height', 1000);
var rect = svg.selectAll('rect')
  .data([0, 2, 3])
  .enter().append('rect')
  .attr('x', function(x) { return +x * 0; })
  .attr('y', function(y) {  return +y * 120; })
  .attr('width', function() { return 100; })
  .attr('height', function() { return 100; })
  .attr('fill', function(x) {  if(x == 0){return'red';}else return 'blue'; });


rect.on("mouseover", (d) => {this.mouseover_node = d})
  .on("mouseout", (d) => {this.mouseover_node = null})
  .call(d3.drag()
    .on("start", function () {
        console.log('start');
        return false;
        })
    .on("drag", function () {
        console.log('drag');
        })
    .on("end",  (sourceElement,index,svgItems) => {
        console.log('end drag with mouseover: ' + this.mouseover_node);
        })
);