javascript - 强制布局内部强制布局 : How to drag inner nodes

Question

我正在开发一个在大圆圈上使用强制布局的应用程序。对于该力布局中的每个节点，我将另一个力布局附加到较小的圆圈上，这些圆圈出现在大圆圈 ( fiddle here) 内。

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

是否可以允许将内圈拖动到较大的圈内？允许独立于外圈拖动内圈 - 甚至超过其边缘 - 也是非常可以接受的行为，尽管并不理想。

Answer 1

当您拖动内圈时，您也将 drag 事件分派(dispatch)到外节点(因为它们是重叠的)。为防止这种情况，您需要为拖动行为使用 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 .