Javascript Girl
  1. Javascript Girl
  3. Création d'un tableau de voies de navigation utilisant d3
Intereting Posts
Comment analyser la chaîne de dates "dd-MMM-aaaa" ou "MMM-jj-aaaa" en utilisant une expression régulière unique? Déterminer le nombre de domaines IP du navigateur client Des options pour résoudre les problèmes de compatibilité du navigateur? Faire l'image suivre la souris avec facilité dans HTML5 Canvas Performances du serveur Socket.IO et utilisation de la bande passante Le modèle Regex qui correspond à n'importe quel nombre comprend 1 à 9 sauf 2 L'extension Firefox comprend un script dans le fichier main.js Quelle est la meilleure façon d'ajouter des options à un objet sélectionné à partir d'un objet JS avec jQuery? Regex pour un hashtag (twitter-like) qui permet des caractères non ASCII Es6 importation pour effets secondaires signifiant Console.time () est-il sécurisé dans node.js? Caractère Newlines ignoré par la table jsx Contenu () dans <type d'objet = "texte / html"> </ object>? Comment pouvez-vous déplacer le curseur jusqu'à la dernière position d'une zone de texte en Javascript? Recréant les fonctionnalités ajaxStart et ajaxComplete de jQuery

Création d'un tableau de voies de navigation utilisant d3

J'ai besoin de générer un diagramme de lignes de baignade semblable au suivant, mais avec l'ajout de dates montrant l'axe des Y. Tous les nœuds que je dois afficher sont des activités avec des dépendances, pas d'éléments de contrôle de flux.

Http://upload.wikimedia.org/wikipedia/commons/a/a5/Approvals.jpg

Est-ce possible d'utiliser quelque chose comme d3 ou existe-t-il une meilleure bibliothèque javascript à utiliser pour ce type de graphique? Je n'ai vu aucun exemple comme celui-ci, donc s'il est possible d'utiliser d3, je ne sais pas où je commencerais. Tous les conseils seraient grandement appréciés.

Sur la base de la réponse précédente et des commentaires, j'ai commencé la voie de la mise en œuvre du graphique en utilisant Raphael.js . Après avoir écrit plus de 600 lignes de code (principalement des éléments de structure pour compenser sa nature en os nu), j'ai découvert que Raphael.js est extrêmement lent à rendre le texte. Je ne sais pas exactement pourquoi, mais c'est apparemment un problème connu. En fin de compte, il prenait 3.5s pour rendre un graphique avec 300 éléments avec 80% du temps consacré au rendu du texte.

J'ai ensuite commencé avec d3.js J'ai trouvé que d3.js est le meilleur choix lors de la création de graphiques liés aux données lorsque le support du navigateur existant n'est pas une préoccupation. La création d'un tableau de la ligne de nage dans d3.js m'a pris environ 100 lignes de code vs 600+ pour Raphael.js. La version d3.js a également plus de fonctionnalités, semble plus agréable et plus sensible.

Alors que le style déclaratif de d3.js s'habitue, cela rend le travail plus facile avec les données. En prime, mon graphique est maintenant d'environ 250 ms 🙂

Voir http://bl.ocks.org/1962173 pour le tableau final de la ligne de natation que j'ai créé.

À mon avis, raphael.js convient ici. Il fournit un support pour tous les navigateurs, y compris IE6-8, tandis que d3 fonctionne uniquement dans les navigateurs compatibles SVG.