Force layout inside force layout：如何拖动内部节点

【问题标题】：Force layout inside force layout: How to drag inner nodesForce layout inside force layout：如何拖动内部节点
【发布时间】：2015-05-10 05:08:19
【问题描述】：

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

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

是否可以让内圈在较大的圈内拖动？允许独立于外圈拖动内圈——甚至越过它的边缘——也是非常可接受的行为，尽管并不理想。

【问题讨论】：

标签： javascript svg d3.js

【解决方案1】：

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

【讨论】：

哇。谢谢。我不知道您可以将on 直接链接到drag，并且不会想到或知道为此目的使用stopPropagation 的正确方法。我不知道sourceEvent 等。鼠标处理对我来说仍然是一个模糊的领域。