调度拖尾事件

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 及更早版本

selection.each()在 d3v5 及更早版本中，传递给和的函数的签名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

selection.each()在 d3v6 中，传递给和的函数签名drag.on()是不同的。数据是前者的第一个参数和后者的第二个参数。因此我们可以使用 Function.apply() 来selection.each()触发结束函数并传递正确的thisand dwhile 传递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>