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

【问题标题】：Multiple drag functions on d3 force drag layoutd3强制拖动布局上的多个拖动功能
【发布时间】：2014-10-27 21:28:38
【问题描述】：

我有以下布局：

灰色面：主容器（缩放、平移）

白色圆圈：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

【问题讨论】：

标签： javascript jquery css d3.js

【解决方案1】：

通过将代码 sn-p 从您的帖子中移出 before 附加包含起始元素的 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/

【讨论】：