Question

我正在使用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中没有创建任何内容。有人可以解释我做错了吗？

Answer 1

这位不正确：

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

没有名为＆＃34; graph＆＃34;的元素，所以这将是一个空的选择。

D3使用CSS3到select个元素。我想你想选择ID为＆＃34; graph＆＃34;的元素，所以它应该是：

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

Answer 2

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

您可以查看GWT包装器的源代码，了解它们与Protovis的交互方式，以及Protovis和d3.js共享一些可能对您的用例有帮助的常见设计模式。

在GWT中为JavaScript代码引用JavaScript库

2 个答案: