Comment Déplacer (Drag and Drop) de multiples Formes avec D3

Comment puis-je déplacer (drag and drop) de multiples formes avec d3.

J'ai essayé de mettre quelques formes dans un svg et déplacer le svg - cela fonctionne, mais pas en douceur.
C'est ce que j'ai obtenu jusqu'à présent

<html>
<head>
<script type="text/javascript" src="d3.v3.min.js"></script>
<title>Creating SVG groups with D3.js</title>
</head>
<body>
<script type="text/javascript">
//http://tutorials.jenkov.com/svg/g-element.html
d3image = d3.select("body");
svgcanvas = d3image.append("svg:svg").attr("width", 700).attr("height", 500);
svg1 = svgcanvas.append("svg:svg").attr("x", 100).attr("y", 100);
circle1 = svg1.append("svg:circle")
.attr("cx", 40)
.attr("cy", 40)
.attr("r", 37.5)
.call(d3.behavior.drag().on("drag", move));
rect1 = svg1.append("svg:rect")
.attr("x",0)
.attr("y",50)
.attr("width",100)
.attr("height",75)
.call(d3.behavior.drag().on("drag", move));
text1 = svg1.append("svg:text")
.text("Group 1")
.attr("x", 0)
.attr("y", 70)
.style("stroke", "orange")
.style("stroke-width", 1)
.style("font-size", "150%")
.style("fill", "orange")
.call(d3.behavior.drag().on("drag", move));
function move(){
var parent = d3.select(this.parentNode);
parent.attr("x", function(){return d3.event.dx + parseInt(parent.attr("x"))})
.attr("y", function(){return d3.event.dy +             parseInt(parent.attr("y"))});
};
</script>
</body>
</html>

Des suggestions?

Vous pourriez essayer de corriger la position de l'élément svg, créer un groupe et de le traduire au groupe lorsque l'objet est déplacé. Dans cette question, vous pouvez trouver plus de détails sur cette approche: stackoverflow.com/questions/7777010/svg-dragging-for-group
Exactement ce que je cherchais - Thx a lot. (Malheureusement je n'ai pas trouvé ce post via Google ou la fonction de recherche). Si vous postez une Réponse, je vais accepter cette solution
Je viens de poster le commentaire comme une réponse. Bonne chance avec votre projet.

OriginalL'auteur Thorsten Niehues | 2013-06-04