分派拖动结束事件

Question

分派拖动结束事件

6

我希望可以编程触发d3-drag的“end”事件。我有一些圆圈，并且已经按照以下方式实现了对它们的拖动处理：

...
.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"));

- Jonas

你需要将任何特定的事件信息传递给函数吗？还是它只需要在指定的选择上运行？ - Andrew Reid

该函数在选择这些圆圈时运行，并使用“this”引用拖动的圆圈和圆圈的数据/位置。 - Jonas

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrew Reid · Accepted Answer

如果您不需要生成任何实际的事件数据，并且我正确理解了问题，那么您可以相对容易地完成此操作，而无需直接使用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>