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.
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
Vous devez vous connecter pour publier un commentaire.
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:
SVG en faisant glisser du groupe
OriginalL'auteur Pablo Navarro
La faites glisser le comportement doit être appelée sur la sélection, dont la position que vous faites une mise à jour au cours de la traînée. Dans votre code, vous avez la mise à jour de la position du nœud parent, ce qui provoque d'étranges "dérive", parce que la position de traînée est lui-même par rapport au nœud parent.
Par exemple, vous pouvez remplacer votre
move
fonction ci-dessus avec:Vous pouvez faire un groupe déplaçable en appelant le comportement sur le groupe, c'est à dire
var g = svg.append("g").call(d3.behavior.drag().on("move", move))
. Vous pouvez ajouter n'importe quel nombre d'enfants de ce groupe.Il en résulte une erreur - êtes-vous sûr que c'est une solution possible?
Oups, je voulais dire .("glisser"), bien sûr.
OriginalL'auteur Jason Davies