調度拖尾事件

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>