嵌套 g 元素的拖动行为

Question

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

• d3 click and drag event nesting

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

在我的例子中，我有一个 g 元素和一堆 svg 元素，包括其他 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 documentation ;)