在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