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

Code:

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

Ich versuche, eine Gruppe zu ziehen, indem ich eines ihrer Kinder als Handle verwende. Ich versuche einfach, Folgendes zu tun, wenn ein Gruppenkind gezogen wird:

Holen Sie sich die Übersetzung Transformation der GruppeZiehen Sie den Abstand von d3.event.dx, d3.event.dyWenden Sie die Differenz auf das Transformationsattribut der Gruppe an

Wenn ein Kind gezogen wird, bewegt sich die Gruppe nicht wie erwartet. Es bewegt sich weniger als die gezogene Strecke und beginnt hier und da zu springen.

Was mache ich hier falsch?

Bearbeiten:

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

Ich versuche, die gesamte Gruppe mit einem oder mehreren untergeordneten Elementen als Ziehpunkte zu ziehen.