强制布局内的强制布局：如何拖动内部节点 [英] Force layout inside force layout: How to drag inner nodes

问题描述

我正在开发一个大圆圈上有力布局的应用程序。对于该力布局中的每个节点，我在较小的圆圈上附加另一个力布局，这些圆圈出现在大圆圈内（在这里摆弄）。

I'm working on an application with a force layout on large circles. To each node in that force layout, I attach another force layout on smaller circles, which appear inside the large circles (fiddle here).

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

D3.js's force layout allows one drag nodes with the mouse. However, although the smaller, inner circles move in relation to the larger, outer circles because of the inner force layouts, I've unable to drag the inner circles in any way that seems independent of the larger circles. That is, dragging an inner circle is exactly like dragging the outer circle. (Setting the fixed property of the data attached to the outer node doesn't help--as in this slightly more complicated fiddle.)

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

Is it possible to allow the inner circles to be dragged within the larger circles? Allowing the inner circles to be dragged independently of the outer circle--even past its edge--would be very acceptable behavior, too, although not ideal.

推荐答案

拖动内圈时，您还要将拖动事件发送到外部节点（因为它们是重叠的）。为了防止这种情况，您需要使用 d3.event.stopPropagation（）来实现拖动行为。

When you drag the inner circle, you are also dispatching drag events to the outer nodes (because they are overlapped). To prevent this, you need to use d3.event.stopPropagation() for your drag behviour.

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();
        })
       );

这是你的小提琴更新。

这篇关于强制布局内的强制布局：如何拖动内部节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！