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

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。

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

Force layout inside force layout: How to drag inner nodes

javascript

svg

d3.js