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

Question

我正在使用大圆圈上的力布局处理应用程序。对于该力布局中的每个节点，我在较小的圆圈上附加了另一个力布局，这些圆圈出现在大圆圈内（fiddle here）。

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

是否可以允许在较大的圆圈内拖动内圈？允许内圆被独立于外圆拖动 - 甚至超过它的边缘 - 也是非常可接受的行为，虽然不理想。

Answer 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。