在 GWT 中为 JavaScript 代码引用 JavaScript 库答案

【问题标题】：Referencing JavaScript library in GWT for JavaScript Code在 GWT 中为 JavaScript 代码引用 JavaScript 库
【发布时间】：2012-07-28 19:04:50
【问题描述】：

我正在使用d3.js library 并编写了一些已绘制我想要的动画的javascript 代码。为了简单/大小，假设我想使用this 示例源代码。我正在尝试使用 GWT 围绕动画构建更丰富的用户界面。例如，如果我在 GWT java 中设计了一个按钮来切换粒子动画的开/关并触发“StopAnimation()”javascript 函数，我应该将 d3.js 库放在哪里以便正确引用它？

我已阅读以下与此主题相关的帖子：

Post 1 Post 2 Post 3

我真的是 GWT 的新手，所以我可能遗漏了一些东西，但所有这些示例都谈到了从 GWT 代码直接接触 javascript 库或与 javascript 代码交互。就我而言，我需要与 GWT 交互的唯一 javascript 代码是 particle example 所以我不相信 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 分配给“menu”div，粒子代码分配给“graph”div。当我通过 firebug 检查 html 时，“graph” div 中没有创建任何内容。有人可以解释我做错了什么吗？

【问题讨论】：

标签： gwt javascript d3.js jsni

【解决方案1】：

此位不正确：

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

没有称为“图表”的元素，因此这将是一个空选择。

D3 使用 CSS3 到 select 元素。我想你想选择 ID 为“graph”的元素，所以它应该是：

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

【讨论】：

是的，我在发布并返回查看代码几个小时后发现了这一点。直到今天才有机会结束这个问题。

【解决方案2】：

除了上面的答案：查看Protovis-GWT 的源代码。 Protovis 是 D3.js 的前身，Protovis-GWT 是它的 GWT 包装器。

您可以查看 GWT 包装器的源代码，了解它们如何与 Protovis 交互，并且由于 Protovis 和 d3.js 共享一些常见的设计模式，它可能会帮助您处理您的用例。

【讨论】：