在GWT中引用JavaScript庫以獲取JavaScript代碼

Question

我正在使用d3.js庫，並編寫了一些JavaScript代碼，這些代碼已經繪制了我想要的動畫。 為了簡單起見，請說我想使用此示例源代碼。 我正在嘗試使用GWT圍繞動畫構建更豐富的用戶界面。 例如，如果我在GWT Java中設計了一個按鈕來切換粒子動畫的開/關並觸發“ StopAnimation（）” javascript函數，則應將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目錄中，它們就會消失，因此該問題不會成為參考錯誤。 我可以像這樣將javascript代碼直接放到html文件中嗎？ 到目前為止，我不擔心與粒子代碼進行GWT / javascript交互。 我只想在同一頁面上看到適當的GWT代碼和粒子代碼動畫。 我擔心以后會停止動畫。

將RootPanel分配給“菜單” div，將粒子代碼分配給“ graph” div。 當我通過Firebug檢查html時，“ graph” div中未創建任何內容。 有人可以解釋我在做什么錯嗎？

Answer 1

此位不正確：

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

沒有稱為“圖形”的元素，因此這將是一個空選擇。

D3使用CSS3 選擇元素。 我認為您想選擇ID為“ graph”的元素，因此應為：

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

Answer 2

除了上述答案之外：請查看Protovis-GWT的源代碼。 Protovis是D3.js的前身，而Protovis-GWT是它的GWT包裝器。

您可以查看GWT包裝程序的源代碼，以了解它們如何與Protovis交互，並且Protovis和d3.js共享一些常見的設計模式，這可能會對您的用例有所幫助。

在GWT中引用JavaScript庫以獲取JavaScript代碼

問題描述

2 個解決方案

解決方案1
1 已采納 2012-07-29 19:56:02

解決方案2
0 2012-07-30 09:24:25

在GWT中引用JavaScript庫以獲取JavaScript代碼

問題描述

2 個解決方案

解決方案1 1 已采納 2012-07-29 19:56:02

解決方案2 0 2012-07-30 09:24:25

解決方案1
1 已采納 2012-07-29 19:56:02

解決方案2
0 2012-07-30 09:24:25