javascript-强制布局内的强制布局：如何拖动内部节点

我正在一个带有大圆圈的强制布局的应用程序上.对于该力布局中的每个节点,我在较小的圆上附加了另一个力布局,这些圆出现在大圆(fiddle here)内.

D3.js的强制布局允许用鼠标拖动一个节点.但是,尽管由于内力布局的原因,较小的内圆相对于较大的外圆移动,但我无法以似乎独立于较大圆的任何方式拖动内圆.也就是说,拖动一个内圆与拖动外圆完全一样. (设置附加到外部节点的数据的固定属性没有帮助-就像this slightly more complicated fiddle中一样.)

是否可以将内部圆圈拖到较大的圆圈内？尽管不理想,但允许内圆独立于外圆拖动(甚至越过其边缘)也是非常可以接受的行为.

解决方法:

拖动内圆时,还会将拖动事件调度到外节点(因为它们是重叠的).为防止这种情况,您需要将d3.event.stopPropagation()用于拖动行为.

var innerAnodes = aNode.selectAll("g.inner")
  .data(innerAdata, function (d) {return d.id;})
  .enter()
  .append("g")
  .attr("class", "inner")
  .attr("id", function (d) {return d.id;})
  .call(innerAlayout.drag()
        .on("dragstart", function(){            
            d3.event.sourceEvent.stopPropagation();
        })
       );

这是您的fiddle updated.

标签：svg,d3-js,javascript
来源： https://codeday.me/bug/20191120/2045472.html