2012-03-21 18 views
4

d3スクリプトをgwt web-appに統合しようとしています。しかし、私はJSNIからd3を実行する方法を理解できません。 d3コードは別々に動作します。私はd3のコードは、div要素にアクセスできないためかもしれないのだろうか?
これは私が、次の午前アプローチです:JSNIを使って、この方法では、次のD3コードを入れて、メソッドを呼び出す+ D3ライブラリを指定する

+は、メインのhtmlファイルの先頭に「スクリプト」タグを追加しますonModuleLoad()で宣言します。 d3コードは、rootPanelも使用しているmain 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から2番目のdivにアクセスしようとしました。

どちらの場合も何も表示されません。どのようにそれが動作するかもしれない任意のアイデアですか?

答えて

5

read the docs on JSNI?手始めに

  1. あなたはinclude external JS dependencies via the module * .gwt.xmlファイルする必要があります。
  2. $ wndおよびという変数を使用して、ライブラリの有効範囲を適切に参照してください。

ここでは園芸品種JSではありません。JSNIドキュメントのルールに従う必要があります。そこにあるJSNIライブラリのmany tutorialsoneを参照してください。

+0

amenです。 @エーザンは、この[[オーバーレイの種類に関するリファレンス]](http://code.google.com/webtoolkit/doc/latest/DevGuideCodingBasicsOverlay.html)を参照して、素早く、一握りのチュートリアルを作成してください。 –

+0

お寄せいただきありがとうございます。 私はコメントに従い、結果を投稿に更新します。 – Ehsan

2

これまでに述べたことに加えて、GWT wrapper for Protovisもチェックアウトすることができます。
d3.jsとprotovisは、同様のデザインprinciples(両方がMike Bostockによって開発されている)

ですから、protovisGWTラッパーからたくさんのアイデアを得ることができますし、多分あなたはまたしてもd3.js.ためのGWTラッパーを実装することができますがあります

+0

ありがとうございました。 私はコメントに従い、結果を投稿に更新します。 – Ehsan

9

私は一緒にGWTにD3を統合する方法の簡単な例を入れている:

https://github.com/lgrammel/d3_gwt

基本的に、あなたはJavaが JSNIを使ってJavaScriptオブジェクトにオブジェクトを変換し、JavaScriptのメソッドに渡す こと

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

:D3コードが含まれています

それはGWTラッパーの周りd3.jsです:

+0

ありがとうLars。 – Ehsan

+0

男、時間を節約できました!どうもありがとう! –

1

非常に遅く答え...
しかしthisプロジェクトが何をしたいかもしれないです。

関連する問題