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/