gwt - 使用 JSNI 在 GWT 应用程序中使用 d3 脚本

Question

我正在尝试将 d3 脚本集成到 gwt web-app 中。但是我无法弄清楚如何从 JSNI 运行 d3。 d3 代码单独运行良好；我想知道这可能是因为 d3 代码无法访问 div 元素？
这是我遵循的方法:
+ 在主 html 文件头中添加 'script' 标签，以指定 d3 库
+ 将以下 d3 代码放入一个方法中，使用 JSNI，并在 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 访问第二个 div。

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

Answer 1

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

https://github.com/lgrammel/d3_gwt

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

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