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?

Lars Grammel · Accepted Answer · 2012-05-31 16:01:48Z

9

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

answered May 31, 2012 at 16:01

Lars Grammel

2,16819 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joseph Lust · Accepted Answer · 2012-03-22 03:46:30Z

5

Have you read the docs on JSNI?

For starters:

You should include external JS dependencies via the module *.gwt.xml file.
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.

answered Mar 22, 2012 at 3:46

Joseph Lust

20.1k8 gold badges91 silver badges86 bronze badges

2 Comments

Eliran Malka Over a year ago

amen to that. @Ehsan please refer to this reference on overlay types for a quick, handful, tutorial.

Ehsan Over a year ago

Thanks a lot for the the helpful information. I will follow the comments and update the post with the results.

Ümit · Accepted Answer · 2012-03-23 08:55:39Z

2

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.

answered Mar 23, 2012 at 8:55

Ümit

17.5k7 gold badges58 silver badges75 bronze badges

1 Comment

Ehsan Over a year ago

Thanks a lot for the help. I will follow the comments and update the post with the results.

ozil · Accepted Answer · 2015-11-12 06:24:59Z

1

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

It's a GWT wrapper around d3.js.

edited Nov 12, 2015 at 6:24

ozil

7,1639 gold badges38 silver badges62 bronze badges

answered Nov 11, 2015 at 16:08

AnthoniS

666 bronze badges

Collectives™ on Stack Overflow

Using d3 script in GWT application using JSNI

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related