Перетащите для вложенных г элементов

Question

Этот вопрос тесно связан со следующим вопросом:

• d3 click and drag event nesting

В этом вопросе, существует единственный г элемент с кучей SVG элементов в группа. Решение заключалось в использовании d3.event.sourceEvent.stopPropagation на dragstart.

В моем случае у меня есть один элемент g с кучей элементов svg, включая другие элементы g. Вот простой пример, который я создал, который иллюстрирует мою проблему: http://jsfiddle.net/eforgy/x1cwur41/ (код скопирован ниже).

Сценарий создает три вложенных элемента g, и каждый элемент g содержит только один прямоугольник. Если вы открываете консоль и нажимаете самый внутренний красный прямоугольник, несмотря на то, что у вас есть stopPropagation на dragstart, вы можете видеть, что он, по-видимому, распространяется с верхнего красного прямоугольника на нижний синий прямоугольник, и когда вы начинаете перетаскивание, используется перетаскивание из синий прямоугольник, т. е. все три прямоугольника движутся. Поведение Я пытаюсь произвести следующее:

• Если перетащить на синем прямоугольнике, все три прямоугольников двигаться вместе
• Если перетащить на зеленом прямоугольнике, синий прямоугольник не двигается, но зеленый и красный прямоугольники перемещаются вместе
• Если вы перетащите красный прямоугольник, то только красный прямоугольник перемещается.

Любая помощь будет оценена по достоинству.

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;)