Using d3 script in GWT application using JSNI

Question

I am trying to integrate a d3 script into gwt web-app. However I cannot figure it out how to run the d3 from JSNI. The d3 code works well separately; I am wondering it may be because the d3 code cannot access the div element?
This is the approach I am following:
+ add the 'script' tags in the main html file head, to specify the d3 libraries
+ Put the following d3 code in a method, using JSNI, and call the method in onModuleLoad(). the d3 code accesses the main div element, which the rootPanel is also using.

/*-{

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

}-*/; 

I also tried another approach; I added another div element inside a HTML element in the Java class, and tried to access the second div from the d3.

In both cases nothing is showing up. any idea how it might work please?

Answer 1

I have put together a short example of how to integrate d3 into GWT:

https://github.com/lgrammel/d3_gwt

Basically, you convert your Java objects into JavaScript objects using JSNI and pass them into the JavaScript method that contains the d3 code:

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