CODEWITHSUNDEEP
gwtjsnid3.js
Ehsan
Ehsan

Reputation: 581

Using d3 script in GWT application using JSNI

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?

Upvotes: 4

Views: 4669

Answers (4)

AnthoniS
AnthoniS

Reputation: 66

A very late answer...
But this project is maybe what you want:

It's a GWT wrapper around d3.js.

Upvotes: 1

Lars Grammel
Lars Grammel

Reputation: 2158

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

Upvotes: 9

Ümit
Ümit

Reputation: 17489

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

So you can get a lot of ideas from the protovisGWT wrapper and maybe you can also even implement a GWT wrapper for d3.js.

Upvotes: 2

Joseph Lust
Joseph Lust

Reputation: 19985

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.

Upvotes: 5

Related Questions