D3拖拽事件

Question

我使用d3来选择矩形。我正在尝试将拖尾事件和鼠标事件都激发在矩形上。它看起来像是拖动事件阻塞鼠标事件。我已经将鼠标向上绑定并将事件拖动到矩形中。当我单击矩形时，mouseup事件不会触发，只会触发拖尾。我尝试了event.stopPropagation()和preventDefault()的不同组合，以控制哪些事件触发。我还尝试将拖动事件设置为空。这些都不管用。我如何使拖曳端和鼠标对鼠标启动？

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)时，我想要标识目标元素。

Answer 1

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

下面是一些代码：JsFiddle用于D3鼠标拖动

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);
        })
);

Answer 2

根据我的经验，您应该能够将鼠标向下的逻辑添加到拖动启动事件中。你在这个案子里试过吗？如果这是一个更复杂的鼠标向下使用，不工作的拖动启动事件，请添加细节。