0

私はd3.js ライブラリを使用しており、必要なアニメーションを既に描画する JavaScript コードがいくつか書かれています。単純化/サイズのために、このサンプル ソース コードを使用したいとします。GWT を使用して、アニメーションに関するよりリッチなユーザー インターフェイスを構築しようとしています。たとえば、パーティクル アニメーションのオン/オフを切り替えて "StopAnimation()" JavaScript 関数をトリガーするボタンを GWT Java で設計した場合、正しく参照されるように d3.js ライブラリをどこに配置すればよいでしょうか?

このトピックに関連する次の投稿を読みました。

ポスト 1 ポスト 2 ポスト 3

私は GWT に本当に慣れていないので、何かを見逃しているかもしれませんが、これらの例はすべて、GWT コードから JavaScript ライブラリーに直接接続すること、または JavaScript コードとインターフェースすることについて述べています。私の場合、GWT からインターフェースする必要がある唯一の JavaScript コードは粒子の例なので、d3.js に特別な JSNI インターフェースが必要だとは思いませんか?...粒子の例のコードは、使用する唯一の部分であるためd3.js。私が直面している問題は、javascript コードをコンパイル済みの html ファイルに配置すると、アニメーションが生成されないことです。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link type="text/css" rel="stylesheet" href="MenuViewer.css">

    <title>Wrapper HTML for MenuViewer</title>

    <script language="javascript" src="com.JoshBradley.MenuViewer/com.JoshBradley.MenuViewer.nocache.js"></script>
    <script language="javascript" src="d3-v2.9.5/d3.v2.js"></script>

</head>
<body>
    <div id="graph"></div>
    <div id="menu"></div>
    <script type="text/javascript">
        var w = 960;
        var h = 500;
        var z = d3.scale.category20c();
        var i = 0;

        var svg = d3.select("body").select("graph").append("svg:svg").attr("width", w).attr("height", h).style("pointer-events", "all").on("mousemove", particle);

        function particle() {
            var m = d3.svg.mouse(this);

            svg.append("svg:circle").attr("cx", m[0]).attr("cy", m[1]).attr("r", 1e-6).style("stroke", z(++i)).style("stroke-opacity", 1).transition().duration(2000).ease(Math.sqrt).attr("r", 100).style("stroke-opacity", 1e-6).remove();
        }
    </script>
</body>

GWT で作成したものは表示されますが、パーティクルは表示されません。最初は d3.js が適切なフォルダーになかったため、参照エラーが発生していましたが、war ディレクトリに配置すると、それらはなくなり、問題は参照エラーにはなりません。そのようなhtmlファイルにjavascriptコードを直接配置することは許可されていますか? 現時点では、GWT/javascript とパーティクル コードとの相互作用については心配していません。適切な GWT コードとパーティクル コードのアニメーションを同じページに表示したいだけです。後でアニメーションを停止するかどうかを心配します。

RootPanel は「メニュー」div に割り当てられ、粒子コードは「グラフ」div に割り当てられます。firebug で html を確認すると、「graph」div に何も作成されません。誰かが私が間違っていることを説明できますか?

4

2 に答える 2

1

このビットは正しくありません:

d3.select("body").select("graph")

「グラフ」という要素がないので、これは空の選択になります。

D3 は CSS3 を使用して要素を選択します。IDが「グラフ」の要素を選択したかったと思うので、次のようにする必要があります。

d3.select("body").select("#graph")
于 2012-07-29T19:56:02.940 に答える
0

上記の回答に加えて: Protovis-GWTのソース コードを確認してください。Protovis は D3.js の前身であり、Protovis-GWT は D3.js の GWT ラッパーです。

GWT ラッパーのソース コードを見て、それらが Protovis とどのようにやり取りするかを確認できます。また、Protovis と d3.js はいくつかの共通の設計パターンを共有しているため、ユース ケースに役立つ可能性があります。

于 2012-07-30T09:24:25.833 に答える