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

Question

我有以下布局：

  

     

  
• 灰色边：主要容器（缩放，平移）
  
• 白圈：d3个节点（mousedown，mouseup，drag）
  
• 红色矩形：矩形（drag，没有容器平移）
  

拖动红色矩形时，我也不想拖动主容器。

此外，缩放时，它们应该受到影响。

我认为这个问题与：

有关

// 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");
...

小提琴：http://jsfiddle.net/praveenscience/88gL4aks/