调度拖尾事件

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 dx; }) .attr("cy", function(d) { return dy; }) .attr("fill", function(d,i) { return ["steelblue","crimson"][i] }) var drag = d3.drag() .on("drag", function(d) { dx = d3.event.x; dy = d3.event.y; d3.select(this) .attr("cx", dx) .attr("cy", dy); }) .on("end", function(d) { console.log(d.x+","+dy); 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() 来触发结束函数并传递正确的this和d同时为事件数据传递null 。

 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 dx; }) .attr("cy", function(d) { return dy; }) .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+","+dy); d3.select(this) .transition() .attr("r", 30) .transition() .attr("r", 10); } function drag(event,d) { dx = event.x; dy = event.y; d3.select(this) .attr("cx", dx) .attr("cy", dy); }

 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>