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

Have you read the docs on JSNI?

For starters:

1. You should include external JS dependencies via the module *.gwt.xml file.
2. Properly reference the scope of the library via the $wnd and this variables.

This is not garden variety JS here, you need to follow by the rules in their JSNI docs. See one of the many tutorials on JSNI library wrapping out there.