Comment ajouter d3 (javascript) à une application vaadin?

Bonsoir les gars,

Je tente actuellement d'ajouter la fonctionnalité de visualisation de d3 à mon application vaadin. Si vous ne savez pas ce qu'est le d3, voici un lien rapide: http://d3js.org/

Pourtant, je suis coincé avec quelques problèmes:

• Comment puis-je ajouter le fichier / bibliothèque javascript "d3.v2.js", qui est nécessaire pour le développement avec d3? J'ai essayé de l'ajouter à un thème propre (WebContent / VAADIN / themes / myOwnTheme / ..), mais grâce au rafraîchissement en eclipse, je reçois le message: "Des erreurs ont eu lieu lors de la construction. Erreurs exécutant le générateur 'JavaScript Validator' sur le projet ' VaadinD3Testproject '. 14 ". Je suppose que c'est parce que le fichier js pourrait être trop grand avec environ 8 000 lignes? J'ai lu d'une manière ou d'une autre le fichier sur le web.xml? Y at-il un moyen?

  • Conversion des nombres sur l'axe des y à la chaîne avec K pour mille d3.js
  • Existe-t-il un événement tap and double tap dans le graphe d3.js force dirigé
  • Emballage de texte en D3
  • Comment mettre des étiquettes sur les bords dans l'exemple Dendrogram?
  • D3 obtient l'élément précédent dans .data ()

• Comment puis-je ajouter un code javascript à ma application vaadin? Après mes recherches, je sais qu'il existe des options à utiliser:

  • GetMainWindow (). ExecuteJavaScript ("alert ('foo');")

  ou

  • Label test = new Label ("déplacer la souris ici …

    ", Label.CONTENT_XHTML);

-> Existe-t-il d'autres façons d'intégrer le code javascript?

Quelqu'un pourrait-il m'aider avec une sorte d'explication "étape par étape", comment résoudre les deux moyens? L'aide serait vraiment appréciée ici, car je n'ai pas cette expérience avec cela.

——- METTRE À JOUR ———–

Comment puis-je ajouter le fichier / bibliothèque javascript "d3.v2.js", qui est nécessaire pour le développement avec d3? J'ai essayé de l'ajouter à un thème propre (WebContent / VAADIN / themes / myOwnTheme / ..), mais par rafraîchissement, je reçois le message: "Des erreurs ont eu lieu lors de la construction. Erreurs exécutant le générateur 'JavaScript Validator' sur le projet 'VaadinD3Testproject' . 14 ". Je suppose que c'est parce que le fichier js pourrait être trop grand avec environ 8 000 lignes? J'ai lu d'une manière ou d'une autre le fichier sur le web.xml? Y at-il un moyen?

J'ai corrigé cette erreur, il s'agissait d'un problème avec ma eclipse et le validateur javascript inbuild. J'ai maintenant pu charger le fichier js dans ma application en écrasant la classe ajax avec une servlet propre, comme cela a été décrit ici dans plusieurs publications.

J'ai maintenant essayé plusieurs façons:

• GetMainWindow.executeJavaScript () ne fonctionne pas d'une manière que je pourrais utiliser d3 avec, d'une certaine manière dès que je veux ajouter un code d3, comme "d3.select (" body ") .append (" svg ");" , Il ne l'exécute pas (peu importe si je fais les étiquettes autour ou pas, mais j'ai remarqué en général que le code sur les étiquettes ne serait pas exécuté)

• J'ai essayé d'utiliser un CustimLayout, car il a été montré dans certains exemples de ce forum, mais il est de nouveau comme décrit ci-dessus. Lorsque je vérifie le code source des sites Web, mon code manque simplement ou est analysé

• Les étiquettes ne fonctionneront plus, peu importe le mode XHTML ou RAW, des occurrences d'exception

• L'écrasement d'une autre méthode de servlet appelée lorsque les corps sont construits au démarrage du serveur, le résultat est que j'ai eu un message d'erreur selon lequel vaadin ne pouvait plus charger le widgets par défaut.

Alors, qu'est ce qui reste? Est-il vraiment impossible d'intégrer d3 avec vaadin? Est-ce que jamais personne n'a essayé cela? J'ai également beaucoup lu hier sur le prochain vaadin 7. Mais serait-il même une option d'utiliser une version alpha dont je n'ai aucune idée de sa stabilité (je pense que c'est pourquoi on l'appelle alpha)

Merci pour toutes les idées que vous partagez avec moi

• Conversion d'une méthode d3.csv en méthode d3.csv.parse
• D3: Qu'est-ce qu'un Bisector?
• Ajout de tooltip au diagramme à barres généré à l'aide du chemin svg
• Comment éviter les astuces de chevauchement du diagramme de lignes multi-séries d3.js
• Syntaxe pour la transition d'axe en svg / d3

 @Override protected void writeAjaxPageHtmlVaadinScripts(Window window, String themeName, Application application, BufferedWriter page, String appUrl, String themeUri, String appId, HttpServletRequest request) throws ServletException, IOException { page.write("<script type=\"text/javascript\">\n"); page.write("//<![CDATA[\n"); page.write("document.write(\"<script language='javascript' src='" + appUrl + "/VAADIN/scripts/jquery/jquery-1.4.4.min.js'><\\/script>\");\n"); page.write("document.write(\"<script language='javascript' src='" + appUrl + "/VAADIN/scripts/highcharts/highcharts.js'><\\/script>\");\n"); page.write("document.write(\"<script language='javascript' src='" + appUrl + "/VAADIN/scripts/highcharts/modules/exporting.js'><\\/script>\");\n"); page.write("//]]>\n</script>\n"); super.writeAjaxPageHtmlVaadinScripts(window, themeName, application, page, appUrl, themeUri, appId, request); }