J'ai besoin d'implémenter un graphe réseau particulier en javascript. J'ai regardé InfoVis Toolkit et Protovis, mais je devais implémenter une mise en page personnalisée pour eux et beaucoup de code personnalisé. Je ne suis pas sûr qu'ils ajoutent beaucoup de valeur. Ce widget doit être très efficace car il ira sur de nombreuses pages Web très visitées, je ne veux pas que le widget ralentisse quelque chose.Graphique réseau en javascript, possible avec jQuery seul?
Les noeuds de ce graphique sont riches en html. Des listes déroulantes, des éléments d'entrée, des popups, etc. Donc, les divs ont beaucoup de sens pour chaque nœud. Je pourrais simplement créer les divs en javascript en utilisant AJAX pour lire les données de mon serveur. Implémentez le mécanisme de mise en page dans javascript et animez tout lors de l'ajout/la mise à jour/la suppression de noeuds via jQuery. La seule chose que je peux penser de m'empêcher d'utiliser seulement jQuery est les connexions entre les noeuds. Comment puis-je les dessiner? Je pourrais être en mesure d'utiliser quelque chose comme Raphael sous les nœuds et de coordonner entre les positions des nœuds et Raphael, mais après avoir regardé très brièvement Raphael, il semble difficile.
Existe-t-il un autre moyen plus simple de dessiner les connexions entre les nœuds? Le support d'IE est important au moins pour IE8. De préférence, les lignes peuvent être courbées et modelées (lignes pointillées, lignes doubles, etc.) pour représenter différents types de connexions.
MISE À JOUR: Je ne me dérange pas de payer pour une solution, comme mxGraph qui a été suggéré. La solution jusqu'à présent, qui n'existe que dans la tête, consiste à créer des images PNG transparentes des différentes connexions. Comme les nœuds dans ma situation sont en quelque sorte dans une grille, il y a un nombre maximum d'images de connexion différentes (elles seront plutôt grandes) et puisqu'elles sont transparentes, elles peuvent être superposées les unes sur les autres. Avoir du sens?
Ca a du sens, la raison pour laquelle je ne voulais pas le faire entièrement avec Raphael est que je voulais dépendre du navigateur pour des choses comme des barres de défilement si le graphique devenait trop gros. J'ai aussi lu dans le groupe de discussion que les éléments d'entrée sur les nœuds sont très compliqués et que mes nœuds sont lourds à cet égard. Le zoom est une autre préoccupation, je continue à lire sur tous ces plugins pour résoudre les problèmes de zoom alors que les événements/attributs jQuery standard fonctionnent parfaitement dans mon cas. Les petites choses comme 100% de largeur sont difficiles aussi. Je suppose qu'il semble que le navigateur gère presque tout si joliment je voudrais en profiter. –
@at: Une partie de cela ne me pose aucun problème (comme utiliser le navigateur pour faire défiler). Les noeuds de Raphael sont des éléments DOM, et la toile sur laquelle il dessine (toile de Raphael, pas de canvas HTML5) est un élément DOM - donc vous pouvez définir la taille de cet élément, etc. Entrer des éléments sur les nœuds, je ne sais pas ou c'est facile. :-) Ni zoom.Bonne chance! –
J. concernant le problème avec l'utilisation du navigateur pour faire défiler ... oui Raphael utilise DOM, mais sans expérimentation et en lisant seulement les forums de discussion et la documentation, il a fixé des tailles d'éléments. Donc, si vous ajoutez un noeud hors de l'écran ou même déplacez le canevas pour qu'il sorte de l'écran, il n'apparaît tout simplement pas ... il n'y a pas de défilement sauf si vous implémentez des barres de défilement. Vous pouvez "écouter" pour ces situations et ajuster les tailles de Raphael, mais juste de ce que j'ai lu, il semble difficile. Je suppose que j'ai vraiment besoin d'expérimenter avec Raphael. –