javascript - d3 强制拖动布局上的多个拖动功能

Question

我有以下布局:

• Gray side: the main container (zoom, pan)
• White circles: d3 nodes (mousedown, mouseup, drag)
• Red rectangles: rectangles (drag, without container panning)

拖红色矩形的时候，不想把主容器也拖过来。

另外，缩放时，它们应该不会受到影响。

我认为这个问题与:

// Add rectangle for pan handlers
containerParent.append("rect")
    .attr("width", SVGWidth)
    .attr("height", SVGHeight)
    .style("fill", "none")
    .style("pointer-events", "all");

JSFIDDLE

Answer 1

通过在 附加包含起始元素的 g 元素之前移动您帖子中的代码片段，问题得到解决:

...
// Add rectangle for pan handlers
containerParent.append("rect")
    .attr("width", SVGWidth)
    .attr("height", SVGHeight)
    .style("fill", "none")
    .style("pointer-events", "all");


// Add starter elements and their container
var starterElmsParent = containerParent.append("g");
...

fiddle :http://jsfiddle.net/praveenscience/88gL4aks/