javascript-在D3中拖动事件的两个“调用”

2019-11-01 05:34:09 阅读：273 来源： 互联网

标签：drag d3-js force-layout javascript

我在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仅调用force.tick()afaik：

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

然后只需确保在dragmove中调用tick().

我这样做是为了通过强制布局添加拖放支持.
see my stackoverflow question & answer for an example

标签：drag,d3-js,force-layout,javascript
来源： https://codeday.me/bug/20191101/1981371.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-在D3中拖动事件的两个“调用”