嵌套 g 元素的拖动行为

Question

这个问题与以下问题密切相关：

• D3 单击并拖动事件嵌套

在这个问题中，有一个g元素，组中有一堆svg元素。解决方案是在dragstart上使用d3.event.sourceEvent.stopPropagation。

就我而言，我有一个带有一堆 svg 元素的 g元素，包括其他 g 元素。这是我创建的一个简单的示例，说明了我的问题：http://jsfiddle.net/eforgy/x1cwur41/（下面复制的代码）。

小提琴创建三个嵌套的 g 元素，每个 g 元素只包含一个矩形。如果您打开控制台并单击最里面的红色矩形，尽管在 dragstart 上有一个 stopPropagation，但您可以看到它似乎从顶部的红色矩形传播到底部的蓝色矩形，当您开始拖动时，它正在使用蓝色矩形的拖动，即所有三个矩形都移动。我尝试产生的行为如下：

• 如果在蓝色矩形上拖动，则所有三个矩形将一起移动
如果在绿色矩形
• 上拖动，蓝色矩形不会移动，但绿色和红色矩形会一起移动
如果在红色矩形
• 上拖动，则只有红色矩形会移动。

任何帮助将不胜感激。

PS：这是代码：

var child = {index: 0};
var w = 800,
    h = 600;
var svg = d3.select("body").append("svg")
            .attr("width", w)
            .attr("height", h);
var cinit = function() {
    return svg;
};
cinit.x = 0;
cinit.y = 0;
cinit.width = w;
cinit.height = h;
var c0 = new Component(cinit); c0.fill = "blue";
var c1 = new Component(c0); c1.fill = "green";
var c2 = new Component(c1); c2.fill = "red";
function Component(parent) {
    var id = child.index;
    child.index += 1;
    console.log("Created component "+id);
    var x = 1.1*parent.x;
    var y = 1.1*parent.y;
    var width = .5*parent.width;
    var height = .5*parent.height;
    var fill = "blue";
    var stroke = "black";
    var drag = d3.behavior.drag()
    .origin(function() {
        var t = d3.transform(group.attr("transform")).translate;
        return {
            x: t[0],
            y: t[1]
        };
    })
   .on("drag", function() {
        console.log("drag: "+id);
        var p = component.position;
        p[0] = d3.event.x;
        p[1] = d3.event.y;
        component.position = p;
    })
    .on("dragstart", function() {
        console.log("dragstart: "+id);
        d3.event.sourceEvent.stopPropagation;
    });
    var group = parent().append("g")
        .attr("transform", "translate("+x+","+y+")")
        .call(drag);
    var rect = group.append("rect")
        .attr("width", width)
        .attr("height", height)
        .attr("fill", fill)
        .attr("stroke", stroke)
        .on("click", function() {console.log("Clicked "+id);});
    function component() {
        return group;
    };
    Object.defineProperty(component,"position",{
        get: function() {return [x, y, width, height];},
        set: function(_) {
            x = _[0];
            y = _[1];
            width = _[2];
            height = _[3];
            rect.attr("width", width).attr("height", height);
            group.attr("transform", "translate("+x+","+y+")");
            return component;
        }
    });
    Object.defineProperty(component,"x",{
        get: function() {return x;},
        set: function(_) {
            x = _;
            group.attr("transform", "translate("+x+","+y+")");
            return component;
        }
    });
    Object.defineProperty(component,"y",{
        get: function() {return y;},
        set: function(_) {
            y = _;
            group.attr("transform", "translate("+x+","+y+")");
            return component;
        }
    });
    Object.defineProperty(component,"width",{
        get: function() {return width;},
        set: function(_) {
            width = _;
            rect.attr("width", width).attr("height", height);
            return component;
        }
    });
    Object.defineProperty(component,"height",{
        get: function() {return height;},
        set: function(_) {
            height = _;
            rect.attr("width", width).attr("height", height);
            return component;
        }
    });
    Object.defineProperty(component,"fill",{
        get: function() {return fill;},
        set: function(_) {
            fill = _;
            rect.attr("fill", fill);
            return component;
        }
    });
    return component;    
}

Answer 1

问题是你没有d3.event.sourceEvent.stopPropagation调用函数。您缺少末尾()的括号。

如有疑问，请不要忘记查看 D3 文档;)