在GWT中引用JavaScript库以获取JavaScript代码

Question

I'm using the d3.js library and have some javascript code written that already draws the animation I want. 我正在使用d3.js库，并编写了一些JavaScript代码，这些代码已经绘制了我想要的动画。 For the sake of simplicity/ size, say I want to use this sample source code. 为了简单起见，请说我想使用此示例源代码。 I'm trying to use GWT to build a richer user interface around the animation. 我正在尝试使用GWT围绕动画构建更丰富的用户界面。 For example, if I designed a button in GWT java to toggle the particle animation on/off and trigger a "StopAnimation()" javascript function, where would I place the d3.js library so it is correctly referenced? 例如，如果我在GWT Java中设计了一个按钮来切换粒子动画的开/关并触发“ StopAnimation（）” javascript函数，则应将d3.js库放在哪里，以便正确引用它？

I've read the following posts related to this topic: 我已阅读以下与该主题相关的文章：

Post 1 Post 2 Post 3 帖子1 帖子2 帖子3

I'm really new to GWT so I may have missed something but all of these examples talk about having direct contact with the javascript library from your GWT code or interfacing with javascript code. 我对GWT真的很陌生，所以我可能错过了一些东西，但是所有这些示例都谈到了从GWT代码直接与javascript库联系或与javascript代码交互。 In my case, the only javascript code I need to interface with from GWT is the particle example so I don't believe d3.js should need any special JSNI interface correct?...since the particle example code is the only part that utilizes d3.js. 就我而言，我需要通过GWT与之交互的唯一javascript代码是粒子示例，所以我不认为d3.js应该需要任何特殊的JSNI接口吗？...因为粒子示例代码是唯一利用该代码的部分d3.js。 The problem I'm running into is that when I place the javascript code into the compiled html file, it never produces the animation. 我遇到的问题是，当我将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>

I see the stuff I created in GWT but no particles. 我看到了我在GWT中创建的内容，但没有任何粒子。 Initially I was getting reference errors because d3.js was not in the right folder, however once I put it in the war directory, they went away so the problem can't be a reference error. 最初，我得到参考错误是因为d3.js不在正确的文件夹中，但是一旦将其放在war目录中，它们就会消失，因此该问题不会成为参考错误。 Am I allowed to place javascript code right into the html file like that? 我可以像这样将javascript代码直接放到html文件中吗？ As of right now, I'm not worried about getting the GWT/ javascript interaction with the particle code working. 到目前为止，我不担心与粒子代码进行GWT / javascript交互。 I just want to see the appropriate GWT code and particle code animations on the same page. 我只想在同一页面上看到适当的GWT代码和粒子代码动画。 I'll worry about stopping the animation later. 我担心以后会停止动画。

The RootPanel is assigned to the "menu" div and the particle code assigned to the "graph" div. 将RootPanel分配给“菜单” div，将粒子代码分配给“ graph” div。 When I check the html through firebug, nothing is created in the "graph" div. 当我通过Firebug检查html时，“ graph” div中未创建任何内容。 Can someone explain what I'm doing wrong? 有人可以解释我在做什么错吗？

Answer 1

This bit is incorrect: 此位不正确：

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

There are no elements called "graph", so this will be an empty selection. 没有称为“图形”的元素，因此这将是一个空选择。

D3 uses CSS3 to select elements. D3使用CSS3 选择元素。 I think you wanted to select the element with ID "graph", so it should be: 我认为您想选择ID为“ graph”的元素，因此应为：

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

Answer 2

In addition to the answers above: Check out the source code for Protovis-GWT . 除了上述答案之外：请查看Protovis-GWT的源代码。 Protovis is the predecessor of D3.js and Protovis-GWT is a GWT wrapper for it. Protovis是D3.js的前身，而Protovis-GWT是它的GWT包装器。

You can look at the source code of the GWT wrapper to see how they interact with Protovis and as Protovis and d3.js share some common design patterns it might help you with your use case. 您可以查看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