HTML5 canvas alternatives pour d3.js, bibliothèque de visualisation graphique
Est-il de la Toile de la bibliothèque qui est comme d3.js (est svg bibliothèque). J'ai un site web ici et j'ai codé un graphique avec les éléments svg cependant, il n'est pas efficace sur smart phone navigateurs et fonctionne de manière lente. J'ai maintenant envie de le changer avec un canvas 2d de type de et voir si c'est mieux ou pas. Pouvez-vous suggérer une toile de la bibliothèque qui est utile à cette fin?
Merci...
Vous devez vous connecter pour publier un commentaire.
D3 n'est pas nécessairement un svg seule bibliothèque - svg est utilisé dans de nombreux cas, mais que la bibliothèque peut faire n'importe quel type de représentations que vous souhaitez faire. Voir cet exemple de parallèle coordonnées à l'aide de toile en D3, par Kai Chang: http://bl.ocks.org/2409451
Voir aussi ici pour une discussion sur les problèmes de performances, etc, qui pourraient être utiles: https://groups.google.com/d/topic/d3-js/mtlTsGCULVQ/discussion
Pour la Samsung Olympique Projet du Génome facebook app, nous avons utilisé http://thejit.org à faire usage de la force graphe orienté style d'animation pour l'application. Il est fortement modifiée par moi et d'autres sur mon équipe, bien sûr, et ne joue qu'un rôle très limité dans l'application, mais il est tout de même un cadre puissant.
Prendre un coup d'oeil à Cytoscape.JS qui utilise un HTML5 canvas pour le rendu. Au moment de la rédaction du présent, c'est à ses balbutiements, mais le projet semble prometteur. Selon ses wiki la bibliothèque prend en charge à la fois de bureau et les navigateurs mobiles:
Chart.js est une bibliothèque javascript qui vient de sortir qui crée des graphiques à l'aide de HTML5 pour le rendu. Ce n'est pas aussi fonction inclusive D3, mais c'est pour devenir exactement ce que dans le futur. http://www.chartjs.org/
Je sais je suis en retard à la fête, mais les temps ont changé, et je pense que cette question mérite une mise à jour de réponse. SVG performance s'est beaucoup amélioré au fil des ans et surtout pour les non-trivial de graphe que les visualisations il donne souvent des performances supérieures; mais cela dépend vraiment de l'utilisation exacte de cas: Si la visualisation est simple et se compose de milliers d'éléments, en particulier sur le mobile, la Toile peut être l'option plus rapide. Si la visualisation est presque banal, WebGL offre la meilleure performance et beats Toile mains vers le bas - en particulier sur mobile!
Cependant WebGL en particulier et aussi la Toile sont un peu plus difficile à utiliser que l'approche déclarative que SVG utilise. Des choses comme les animations CSS et les transitions sont facile à faire avec SVG et de donner de bonnes performances grâce à l'accélération matérielle et totalement indépendant des performances JavaScript. Canvas et WebGL toujours besoin de JavaScript.
Si vous prenez un coup d'oeil au dessin de graphes bibliothèque yFiles pour le HTML vous verrez qu'il offre à tous les trois technologies en même temps. C'est parce que tous les trois peuvent être le meilleur choix, en fonction de la précision de cas d'utilisation.
Il y a un l'entrée de blog qui compare les performances de SVG, Canvas, WebGL, surtout dans le contexte de visualisation graphique. Il compare diverses graphique tailles et catégories d'appareils. La "conclusion" est qu'il n'y a pas un gagnant clair. Le plus souvent la combinaison de tous les trois technologies donne les meilleurs résultats. Pour les petits graphiques, cependant, SVG, la plupart du temps, donne de très bons résultats et c'est un plaisir de travailler avec. C'est aussi la raison pour laquelle d3.js a son accent sur SVG, plutôt que de Canvas et WebGL, je dirais.
Il est interactif démo liés à partir de cette entrée de blog qui vous permet de jouer avec les différentes technologies et voir leurs points forts et leurs faiblesses. Bien sûr, la démo principalement compare les trois technologies utilisées dans la bibliothèque afin que vos résultats peuvent varier, mais ils ont passé beaucoup de temps à l'optimisation de tous les trois technologies dans la bibliothèque, donc je pense que les résultats ne sont pas trop biaisée.
Disclaimer: je travaille pour l'entreprise qui crée de l'mentionnés ci-dessus de la bibliothèque, mais je ne représente pas mon employeur, ici, sur DONC. Je pense que ce que j'ai dit doit être valable pas seulement pour cette bibliothèque.