Articles of svg

Mettez 2 svg côte à côte

Je peux utiliser 2 svg sur un seul écran dans d3.js. Le Code ressemble à ça et ça marche très bien: <svg width="880" height="800" id="svg1"></svg> <svg width="880" height="800" id="svg2"></svg> var svg1 = d3.select("#svg1"); var svg2 = d3.select("#svg2"); Mon seul problème est que svg2 apparaît sous svg1. Mais mon objectif est de les mettre côte à […]

Positionnement d'un élément SVG transformé dans un svg-canvas

J'ai écrit une fonction qui redimensionnera un chemin SVG, ou n'importe quelle forme. Cependant, lorsque je l'utilise, le chemin est redessiné mais malheureusement, il change également de position dans mon svg-canvas. C'est ma fonction function output() { var transformw=prompt("Enter your new width"); var transformh=prompt("Enter your new height"); var lastw = svg_1.getBoundingClientRect().width; var lasth = svg_1.getBoundingClientRect().height; […]

Ajouter des étiquettes aux noeuds dans l'exemple de mise en page de la force D3 "Group / Bundle Nodes" de Hobbelt?

J'ai adapté l'excellent exemple de Ger Hobbelt de nœuds group / bundle https://gist.github.com/GerHobbelt/3071239 Comme JSFiddle ici: Https://jsfiddle.net/NovasTaylor/tco2fkad/ L'affichage démontre à la fois des noeuds rabattables et des régions (coques). Le premier qui m'échappe est la façon d'ajouter des étiquettes aux nœuds élargis. J'ai ajouté avec succès des étiquettes aux noeuds dans mes autres diagrammes de […]

D3.js Diagramme d'accords – Le texte apparaît / disparaît lorsque survolent un arc

J'essaie d'ajouter une petite fonction au diagramme d'accords créé par Mike Bostock. Quand je roule sur un certain arc, dis le groupe A, je veux un morceau de texte que j'ai placé à droite du diagramme d'accord pour mettre à jour son texte pour expliquer quelques idées particulières au groupe A. Lorsque l'utilisateur déplace son […]

D3: obtenez la zone de délimitation d'un élément sélectionné

J'ai plusieurs éléments dans un svg et je veux zoomer sur l'un d'entre eux. Je voudrais faire la même chose que cet exemple, mais avec des chemins non géographiques. Quelque chose comme d3.select(myElement).bounds() that I can use to pan and zoom my svg Je n'ai rien trouvé avec D3. Ai-je manqué quelque chose? Merci

Comment puis-je détecter l'intersection des lignes sur un globe géométrique D3?

J'ai joué avec plusieurs globules d3: Globe tournant Rotation orthographique Projections de la carte décalée Et j'ai mis cela ensemble: Graphique du grand cercle Mon objectif est de montrer que ce graphique peut être de 3 couleurs . Le problème que je présente est que la méthode de dessin des lignes implique l'utilisation de la […]

D3.js: Accès à la propriété d'objet à l'intérieur d'Array for Creating Line Graph

J'essaie de créer un graphique linéaire avec d3.js avec cette structure de données: Var dataset1 = [ {"Nom_video": "Apples", "vues vidéo": 100}, {"Nom_fichier": "Oranges", "vues vidéo": 35}, {"Video_name": "Grapes", "video_views": 20}, {"Video_name": "Avocados", "vidéos_visages": 85}, {"Nom_fichier": "Tomates", "vues vidéo": 60} ] Le numéro d'index de l'objet est la valeur x et les "vues vidéo" sont […]

Le zoom D3 ne fonctionne pas

Je sais qu'il y a une solution facile ici, mais j'ai essayé d'exécuter quelques tutoriels et j'ai échoué à les appliquer à mon code. J'ai créé un diagramme d'élévation en traçant une area distincte pour chaque segment de 3-5 points de données. Donc, j'ai quelques parcelles sur le même graphique. En raison de cela, j'ai […]

Comment puis-je exécuter un javascript en tant que script node.js sans DOM?

Https://github.com/jasondavies/d3-cloud est un nuage de mots en javascript utilisant la bibliothèque D3. C'est une démo interactive . La démo a utilisé le script d3-cloud pour générer un SVG dans le HTML. J'aimerais utiliser cela sur le côté du serveur et obtenir node.js pour me générer un fichier SVG et l'enregistrer sur le disque chaque fois […]

D3.js Disposition de la force rabattable: les liens ne sont pas générés

J'essaie de générer une disposition de force pliable semblable à cet exemple: http://bl.ocks.org/mbostock/1062288 : Les données utilisées pour générer ma disposition de force sont un objet JSON issu d'une API. Je suis en mesure de traverser la structure de données et de générer des noeuds qui sont ajoutés au SVG (les deux noeuds racine et […]