调度拖动结束事件

Question

我想以编程方式触发 d3-drag 的“结束”事件。我有一些圆圈，并且像这样实现了它们的拖动处理：

...
.call(d3.drag()
     .on("drag", function () {...})
     .on("end", function () {...})
)

现在，在我的代码后面，我想以编程方式触发此代码的“结束”部分。

我已经尝试过这样的事情：

d3.select("#myID").dispatch("end");
d3.select("#myID").dispatch("dragend");
d3.select("#myID").call(d3.drag().dispatch("end"));

Answer 1

如果您不需要生成任何实际的事件数据，而且我对问题的理解是正确的，您可以相对轻松地完成此操作而无需直接 d3.dispatch。下面会给你 this 和节点数据本身（在 d3v5 中它也会给你 i 和 nodes）。

D3v5 及更早版本

在 d3v5 及更早版本中，传递给 selection.each() 和 drag.on() 的函数签名是相同的。在这种情况下，您可以轻松地将函数分配给一个变量并将其传递给两者。或者，您可以使用 drag.on("typeName").

访问拖动事件函数

这是一个简单的例子：

var svg = d3.select("body")
  .append("svg")
  .attr("width",500)
  .attr("height",300);
  
var data = [{x:40,y:100},{x:250,y:100}];

var circles = svg.selectAll(null)
  .data(data)
  .enter()
  .append("circle")
  .attr("r", 10)
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })
  .attr("fill", function(d,i) {
    return ["steelblue","crimson"][i]
  })

var drag = d3.drag()
  .on("drag", function(d) {
    d.x = d3.event.x; d.y = d3.event.y;
    d3.select(this)
      .attr("cx", d.x)
      .attr("cy", d.y);
  })
  .on("end", function(d) {
     console.log(d.x+","+d.y);
     d3.select(this)
       .transition()
       .attr("r", 30)
       .transition()
       .attr("r", 10);
  })
  
circles.call(drag);

d3.select("button").on("click", function() {
  var circle = d3.select("circle")
    .each(drag.on("end"));
})

circle {
   cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<button>Trigger Drag End On Blue Circle</button>

D3v6

在 d3v6 中，传递给 selection.each() 和 drag.on() 的函数签名不同。数据是前者的第一个参数和后者的第二个参数。因此，我们可以在 selection.each() 中使用 Function.apply() 来触发结束函数，并在为事件数据传递 null 时传递正确的 this 和 d。

var svg = d3.select("body")
  .append("svg")
  .attr("width",500)
  .attr("height",300);
  
var data = [{x:40,y:100},{x:250,y:100}];

var circles = svg.selectAll(null)
  .data(data)
  .enter()
  .append("circle")
  .attr("r", 10)
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })
  .attr("fill", function(d,i) {
    return ["steelblue","crimson"][i]
  })

var drag = d3.drag()
  .on("drag", drag)
  .on("end", dragend)

circles.call(drag);

d3.select("button").on("click", function() {
   var circle = d3.select("circle")
    .each(function(d) { 
       dragend.apply(this,[null,d]) 
    })
})


function dragend(event,d) {
  console.log(d.x+","+d.y);
  d3.select(this)
    .transition()
    .attr("r", 30)
    .transition()
    .attr("r", 10);
}
function drag(event,d) {
  d.x = event.x; d.y = event.y;
  d3.select(this)
    .attr("cx", d.x)
    .attr("cy", d.y);
}

circle {
   cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.0.0/d3.min.js"></script>
<button>Trigger Drag End On Blue Circle</button>

调度拖动结束事件

Dispatching drag-end event

javascript

event-dispatching

d3.js