0

我正在使用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 分配给“menu”div，粒子代码分配给“graph”div。当我通过 firebug 检查 html 时，“graph” div 中没有创建任何内容。有人可以解释我做错了什么吗？

4

2 回答 2

1

此位不正确：

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

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

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

d3.select("body").select("#graph")
于 2012-07-29T19:56:02.940 回答
0

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

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

于 2012-07-30T09:24:25.833 回答