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

Ehs*_*san 4 gwt jsni d3.js

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

/*-{

    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);

}-*/; 
Run Code Online (Sandbox Code Playgroud)

我也试过另一种方法; 我在Java类的HTML元素中添加了另一个div元素,并尝试从d3访问第二个div.

在这两种情况下都没有出现.有什么想法可以吗?

Lar*_*mel 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


Jos*_*ust 5

读过JSNI的文档了吗?

对于初学者:

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

这不是花园种类的JS,你需要遵循他们的JSNI文档中的规则.请参阅有关JSNI库的许多教程之一.