Q

在使用JSNI的GWT應用程序中使用d3腳本

2012-03-21 83 views 4 likes

4

我正在嘗試將d3腳本集成到gwt web-app中。但是我無法弄清楚如何從JSNI運行d3。 d3代碼獨立運行，我想知道這可能是因爲D3代碼無法訪問div元素？
這是我的以下方法：
+在主html文件頭中添加'script'標籤，指定d3庫
+將下面的d3代碼放在方法中，使用JSNI並調用方法在onModuleLoad（）中。 d3代碼訪問rootPanel也使用的主要div元素。在使用JSNI的GWT應用程序中使用d3腳本

/*-{ 

    var w = 960, h = 800; 
    var svg = d3.select("#chart2") 
     .append("svg:svg") 
     .attr("width", w) 
     .attr("height", h) 
     .append("svg:g") 
     .attr("transform", "translate(40, 0)"); 

     svg.selectAll("circle") 
      .data([ 32, 57, 112, 293 ]) 
      .enter() 
      .append("circle") 
      .attr("cy", 90) 
      .attr("cx", String) 
      .attr("r", Math.sqrt); 

}-*/;

我也試過另一種方法;我在Java類的HTML元素中添加了另一個div元素，並嘗試從d3訪問第二個div。

在這兩種情況下都沒有顯示出來。任何想法如何可能工作嗎？

2012-03-21 Ehsan

A

回答

5

你有read the docs on JSNI？

對於初學者：

你應該include external JS dependencies via the module * .gwt.xml文件。
通過$ wnd和這個變量正確引用庫的範圍。

這不是花園品種JS在這裏，你需要遵循他們的JSNI文檔中的規則。請參閱many tutorials的one關於包裝在那裏的JSNI庫。

2012-03-22 03:46:30

+0

阿門到那。 @Ehsan請參考這個[關於覆蓋類型的參考]（http://code.google.com/webtoolkit/doc/latest/DevGuideCodingBasicsOverlay.html），以獲得快速，少量的教程。 – 2012-03-22 21:45:46

+0

非常感謝有用的信息。我會按照評論和結果更新帖子。 – Ehsan 2012-03-23 18:43:15

2

除了之前所說的，您還可以查看GWT wrapper for Protovis。
d3.js和protovis也有類似的設計principles（均爲Mike Bostock開發）

所以，你可以得到很多從protovisGWT包裝的想法，也許你也甚至可以實現一個GWT包裝器d3.js.

2012-03-23 08:55:39

+0

非常感謝您的幫助。我會按照評論和結果更新帖子。 – Ehsan 2012-03-23 18:44:13

9

我已經把如何D3融入GWT一個簡單的例子：

https://github.com/lgrammel/d3_gwt

基本上，您將您的Java對象轉換爲使用 JSNI JavaScript對象，並將其傳遞到JavaScript方法那包含D3代碼：

https://github.com/lgrammel/d3_gwt/blob/master/src/de/larsgrammel/d3_gwt/client/D3_gwt.java

https://github.com/lgrammel/d3_gwt/blob/master/war/d3_vis.js

2012-05-31 16:01:48

+0

非常感謝Lars。 – Ehsan 2012-06-04 23:55:25

+0

男人，你救了我幾個小時的工作！非常感謝！ – 2012-12-17 17:13:46

1

一個很晚的答案...
但this項目也許是你想要什麼：

這是一個GWT包裝周圍d3.js。

2015-11-11 16:08:48 AnthoniS

相關問題