4

d3スクリプトをgwtweb-appに統合しようとしています。ただし、JSNIからd3を実行する方法がわかりません。d3コードは個別にうまく機能します。d3コードがdiv要素にアクセスできないためかもしれないと思いますか？
これは私が従うアプローチです：
+メインのhtmlファイルヘッドに'script'タグを追加して、d3ライブラリを指定します
+次のd3コードをJSNIを使用してメソッドに入れ、onModuleLoad（）でメソッドを呼び出します。d3コードは、rootPanelも使用しているメインのdiv要素にアクセスします。

/*-{

    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にアクセスしようとしました。

どちらの場合も、何も表示されません。それがどのように機能するかについて何か考えはありますか？

4

4 に答える 4

9

d3 を GWT に統合する方法の短い例をまとめました。

https://github.com/lgrammel/d3_gwt

基本的に、JSNI を使用して Java オブジェクトを JavaScript オブジェクトに変換し、d3 コードを含む 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

于 2012-05-31T16:01:48.377 に答える
5

JSNIのドキュメントを読んだことがありますか？

手始めに：

  1. モジュール*.gwt.xmlファイルを介して外部JS依存関係を含める必要があります。
  2. $wndおよびthis変数を介してライブラリのスコープを適切に参照します。

これはここでは庭の品種JSではありません。JSNIドキュメントのルールに従う必要があります。JSNIライブラリに関する多くのチュートリアルの1つを参照してください。

于 2012-03-22T03:46:30.547 に答える
2

前に述べたことに加えて 、 Protovis の GWT ラッパーも確認できます。
d3.js と protovis の設計原則は似ています(どちらもMike Bostockによって開発されました) 。

したがって、protovisGWT ラッパーから多くのアイデアを得ることができ、d3.js の GWT ラッパーを実装することもできます。

于 2012-03-23T08:55:39.567 に答える
1

非常に遅い答え...
しかし、このプロジェクトはおそらくあなたが望むものです:

の GWT ラッパーd3.jsです。

于 2015-11-11T16:08:48.150 に答える