Using d3 script in a GWT application using JSNI

Question

I am trying to integrate a d3 script in a gwt web application. However, I cannot figure out how to start d3 from JSNI. The d3 code works well individually; I am wondering maybe because the d3 code cannot access the div element?
This is the approach I follow:
+ add 'script' tags to the main header of the html file to indicate d3 libraries
+ Put the following d3 code in the method using JSNI and call the method in onModuleLoad (). d3 code refers to the main div element, which also uses 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); }-*/; 

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

In both cases, nothing appears. any idea how this might work?

Answer 1

Do you read documents in JSNI ?

To start:

• You must enable external JS dependencies through the * .gwt.xml module .
• Correctly reference the library area via the $ wnd and this variables.

This is not JS garden variety here, you need to follow the rules in your JSNI docs. See one of the many JSNI library wrap tutorials.

Answer 2

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

https://github.com/lgrammel/d3_gwt

Basically, you convert your Java objects to JavaScript objects using JSNI and pass them to a JavaScript method that contains 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

Answer 3

In addition to what was said earlier, you can also check out the GWT wrapper for protoviz .
d3.js and protovis have similar design principles (both are designed by Mike Bostock )

So you can get a lot of ideas from the protovisGWT shell, and perhaps you can even implement the GWT shell for d3.js.

Answer 4

Very late answer ...
But this project, maybe you want:

This is a GWT wrapper around d3.js