如何将d3（javascript）添加到vaadin应用程序？

晚上好，

我目前正在尝试将d3的可视化function添加到我的vaadin应用程序中。 如果你不知道d3是什么，这里有一个快速链接： http ： //d3js.org/

但我遇到了一些问题：

• 如何添加“d3.v2.js”javascript文件/库，这对于使用d3进行开发是必要的？ 我尝试将其添加到自己的主题（WebContent / VAADIN / themes / myOwnTheme / ..），但是通过在eclipse中刷新我收到消息：“构建期间发生错误。错误运行构建器’JavaScript Validator’在项目上’ VaadinD3Testproject’。14“。 我想这是因为js文件可能太大了，大约有8000行？ 我读到了以某种方式将文件添加到web.xml？ 有办法吗？

• 我怎样才能将javascript代码添加到我的vaadin应用程序中？ 经过我的研究，我知道可以使用的选项：

  • 。getMainWindow（）executeJavaScript（ “警报（ ‘富’）;”）

  要么

  • 标签测试=新标签（“将鼠标移到这里..

    ”，Label.CONTENT_XHTML）;

– >有没有其他方法来集成JavaScript代码？

有人可以用一种“一步一步”的解释帮助我，如何解决这两种方式？ 这里的帮助真的很感激，因为我对此并不熟悉。

——-更新———–

如何添加“d3.v2.js”javascript文件/库，这对于使用d3进行开发是必要的？ 我尝试将其添加到自己的主题（WebContent / VAADIN / themes / myOwnTheme / ..），但通过刷新我收到消息：“构建期间发生错误。错误运行构建器’JavaScript Validator’项目’VaadinD3Testproject’ .14“。 我想这是因为js文件可能太大了，大约有8000行？ 我读到了以某种方式将文件添加到web.xml？ 有办法吗？

我修复了这个错误出现，这是我的eclipse和inbuild javascriptvalidation器的问题。 我现在能够通过用自己的servlet覆盖ajax类来将js文件加载到我的应用程序中，正如在几篇文章中所描述的那样。

我现在尝试了几种方法：

• getMainWindow.executeJavaScript（）无法以某种方式使用d3，只要我想添加一些d3代码，比如“d3.select（”body“）。append（”svg“）;” ，它只是不执行它（无论我是否执行标记，但我一般注意到标记中的代码不会被执行）

• 我尝试使用CustimLayout，因为它已在本论坛的一些示例中显示，但它再次如上所述。 当我检查网站源代码时，我的代码只是丢失或解析出来

• 标签不再起作用，无论是XHTML还是RAW模式，都会发生exception

• 覆盖在服务器启动时构建bodys时调用的另一个servlet方法，结果是我收到一条错误消息，即vaadin甚至无法加载默认的widgetset。

那么，还剩下什么？ 难道真的没有办法将d3与vaadin集成吗？ 没有人试过这个吗？ 我昨天也读了很多关于即将推出的vaadin 7.但是它甚至可以选择使用我不知道它的稳定性的alpha版本（我猜这就是为什么它被称为alpha）

感谢您与我分享的每一个想法

Answer 1

合并现有JavaScript库的最全面方法是开发自己的自定义组件 。 这比“普通”Vaadin开发更复杂，但是可以让您在浏览器中完全访问javascript方法和对象（通过GWT）。

要在页面中包含外部javascript文件，请扩展ApplicationServlet类，并覆盖writeAjaxPageHtmlVaadinScripts方法。 以下是包含一些外部库的当前项目的摘录。

然后，您可以使用’getMainWindow（）。executeJavaScript（blah）’来利用这些库。

不过，从我所看到的d3来看，开发自定义Vaadin组件更有意义。 您可能会发现查看是否存在现有GWT d3小部件更为谨慎，然后尝试在Vaadin组件中使用它。

 @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("\n"); super.writeAjaxPageHtmlVaadinScripts(window, themeName, application, page, appUrl, themeUri, appId, request); } 

Answer 2

我知道它为时已晚，但我开始整合D3js和Vaadin。 我有一些资源。 它可能对这条轨道上的人有所帮助首先为Vaadin 出版的最佳书籍是Vaadin书这本书将帮助您获得Vaadin的全面知识。它也被推荐用于Vaadin认证

点击这里下载 Book of Vaadin

1） Freecode Charts和D3 Wrapper

2） D3与Vaadin的整合

如果您在本教程中遇到任何错误，请尝试参考此链接 – > Vaadin论坛

3） 直接使用d3 libraray