4

我正在尝试将 d3 脚本集成到 gwt web-app 中。但是我无法弄清楚如何从 JSNI 运行 d3。d3 代码单独运行良好；我想知道这可能是因为 d3 代码无法访问 div 元素？
这是我正在遵循的方法：
+ 在主 html 文件头中添加“脚本”标签，以指定 d3 库
+ 使用 JSNI 将以下 d3 代码放入方法中，并在 onModuleLoad() 中调用该方法。d3 代码访问主 div 元素，rootPanel 也在使用该元素。

/*-{

    var w = 960, h = 800;
    var svg = d3.select("#chart2")
        .append("svg:svg")
        .attr("width", w)
        .attr("height", h)
        .append("svg:g")
        .attr("transform", "translate(40, 0)");

        svg.selectAll("circle")
            .data([ 32, 57, 112, 293 ])
            .enter()
            .append("circle")
            .attr("cy", 90)
            .attr("cx", String)
            .attr("r", Math.sqrt);

}-*/;

我还尝试了另一种方法；我在 Java 类的 HTML 元素中添加了另一个 div 元素，并尝试从 d3.xml 访问第二个 div。

在这两种情况下都没有出现。知道它是如何工作的吗？

4

4 回答 4

9

我整理了一个关于如何将 d3 集成到 GWT 中的简短示例：

https://github.com/lgrammel/d3_gwt

基本上，您使用 JSNI 将 Java 对象转换为 JavaScript 对象，并将它们传递给包含 d3 代码的 JavaScript 方法：

https://github.com/lgrammel/d3_gwt/blob/master/src/de/larsgrammel/d3_gwt/client/D3_gwt.java

https://github.com/lgrammel/d3_gwt/blob/master/war/d3_vis.js

于 2012-05-31T16:01:48.377 回答
5

你读过 JSNI 上的文档吗？

对于初学者：

  1. 您应该通过模块*.gwt.xml 文件包含外部 JS 依赖项。
  2. 通过$wnd和this变量正确引用库的范围。

这不是花园里的各种 JS，你需要遵守他们的 JSNI 文档中的规则。请参阅有关 JSNI 库的众多教程之一。

于 2012-03-22T03:46:30.547 回答
2

除了前面所说的，您还可以查看 Protovis 的 GWT 包装器。
d3.js 和 protovis 有相似的设计原则（都是由Mike Bostock开发的）

所以你可以从 protovisGWT 包装器中获得很多想法，也许你甚至可以为 d3.js 实现一个 GWT 包装器。

于 2012-03-23T08:55:39.567 回答
1

一个很晚的答案......
但这个项目可能是你想要的：

它是一个 GWT 包装器d3.js。

于 2015-11-11T16:08:48.150 回答