javascript - 调度拖尾事件

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()触发结束函数并传递正确的 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 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>