两个“调用”以拖动 d3 中的事件

Two 'calls' to drag events in d3

本文关键字：d3 事件 拖动 调用 两个      更新时间：2023-09-26

我在 d3 中使用了强制导向布局，我在开发中遇到了一些障碍。

    var circle = svg.append("svg:g").selectAll("circle") 
     .data(force.nodes()) 
   .enter().append("svg:circle")   
     .attr("r", function( d ) { 
      return d.fValue; 
     }) 
     .style('fill', function( d ) { 
       return strokeColor( d.name );   
     })
     .call(force.drag);

基本上，我想向 force.drag 定义的"拖动"行为添加更多事件侦听器 - 也就是说，我想确保节点在拖动时（而不是鼠标悬停时）改变颜色。 我能想到的唯一两种方法是以某种方式更改 force.drag 函数或定义新的拖动行为。

我不知道如何以第一种方法执行此操作，但是当我尝试第二种方式时，方法链接将仅采用第二个拖动事件，而忽略第一个force.drag事件。

.call(customDrag)
.call(force.drag); // This would work

如何附加另一个拖动事件侦听器或修改现有 force.drag，以适应我要添加的新动画？

提前致谢

定义自己的侦听器，因为force.drag只调用 afaik force.tick()：

  var node_drag = d3.behavior.drag()
        .on("dragstart", dragstart)
        .on("drag", dragmove)
        .on("dragend", dragend);
  vis.selectAll("g.node").call(node_drag)

然后，请确保您在dragmove中拨打tick()。

我这样做是为了添加带有强制布局的拖放支持。查看我的 StackOverflow 问题和答案以获取示例

相关文章：