Jsfiddle:http://jsfiddle.net/6NBy2/

Kod:

var in_editor_drag = d3.behavior.drag()
             .origin(function() {
                var g = this.parentNode;
                return {x: d3.transform(g.getAttribute("transform")).translate[0],
                        y: d3.transform(g.getAttribute("transform")).translate[1]};
            })
            .on("drag", function(d,i) {

                g = this.parentNode;
                translate = d3.transform(g.getAttribute("transform")).translate;
                x = d3.event.dx + translate[0],
                y = d3.event.dy + translate[1];
                d3.select(g).attr("transform", "translate(" + x + "," + y + ")");
                d3.event.sourceEvent.stopPropagation();
            });

svg = d3.select("svg");
d = {x: 20, y: 20 };
groups = svg
        .append("g")
        .attr("transform", "translate(20, 20)");

groups
    .append("rect")
        .attr("x", 0)
        .attr("y", 0)
        .attr("width", 100)
        .attr("height", 100)
        .style("fill", "green")
        .call(in_editor_drag)
        .style("opacity", 0.4);

Próbuję przeciągnąć grupę, używając jednego z jej dzieci jako uchwytu. Po prostu próbuję to zrobić, gdy dziecko grupy jest przeciągane:

Uzyskaj transformację tłumaczenia grupyUzyskaj odległość przeciągania od d3.event.dx, ​​d3.event.dyZastosuj różnicę do atrybutu transformacji grupy

Gdy dziecko jest przeciągane, grupa nie porusza się zgodnie z oczekiwaniami. Porusza się mniej niż przeciągnięta odległość i zaczyna skakać tu i tam.

Co ja tu robię źle?

Edytować:

Zaktualizowano jsfiddle:http://jsfiddle.net/6NBy2/2/

Próbuję przeciągnąć całą grupę, używając jednego lub więcej dzieci jako przeciągających uchwytów.