jQuery Girl
  1. jQuery Girl
  3. y at-il un moyen d’append glisser-déposer dans svg d3.js?
Intereting Posts
La méthode ajax de jQuery ne charge pas le fichier texte Drop () se fait appeler deux fois avec Sortable / Droppable Diapositive de contrôle glissable personnalisée jQuery sans interface utilisateur jQuery Testez la disponibilité d’URL avec javascript Calculer un x un autre dans jQuery Comment créer un nuage de tags rotatif dans jQuery Ajout d’un espace réservé à une zone de texte dans le moteur de recherche personnalisé Google sur mon site Web html Comment appeler webmethod en Asp.net C # RangeValidator ne fonctionne pas lors de la sélection de la valeur DropDownList à l’aide de jQuery HTML – Comment obtenir des décalages de sélection associés à des balises HTML jQuery ajoute une classe à la li actuelle et supprime prev li quand on clique à l’intérieur de la li Activer Inline Cliquez pour cliquer sur Jquery bascule la fonction sur un nombre limité de balises lors d’un événement clic JS Submit n’est pas la même chose que HTML Submit charger une URL externe dans la boîte de dialog modale jquery ui

y at-il un moyen d’append glisser-déposer dans svg d3.js?

Je travaille sur un générateur de disposition dans SVG et souhaite y append des fonctionnalités de glisser-déposer et de redimensionnement. ma page Web contient un canevas principal (SVG) et quelques SVG nesteds. Je veux que mes fichiers SVG nesteds (enfants SVG que vous puissiez dire) puissent être déplacés. Comment puis je faire ça? J’ai cherché dans JQuery, nous avons une API déplaçable et redimensionnable, mais elle ne fonctionne pas en SVG. Comment puis-je y parvenir en d3.js? toute aide serait préférable. Merci d’avance.

L’exemple de Mike Bostock avec Circle Dragging devrait vous aider à démarrer. Le ssortingct minimum, comparable à jQuery, serait: 

 svg.selectAll("svg").call(d3.drag().on("drag", dragged)); function dragged(d) { d3.select(this) .attr("x", d3.event.x) .attr("y", d3.event.y); }

Mais il vaut mieux associer d’abord les éléments SVG aux objects de données, puis modifier directement les données plutôt que les éléments: 

 svg.selectAll("svg").data(elements) .enter().append("svg") .attr("x", function(d) { return dx; }) .attr("y", function(d) { return dy; }) .attr("width", function(d) { return d.width; }) .attr("height", function(d) { return d.height; }) .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); function dragstarted(d) { d3.select(this).raise(); } function dragged(d) { d3.select(this) .attr("x", dx = d3.event.x) .attr("y", dy = d3.event.y); } function dragended(d) { }

Pour prendre en compte le décalage du pointeur de la souris et transformer le glisser-déposer en une opération de redimensionnement, vous devez renseigner les fonctions du gestionnaire de glisser en conséquence.