Использование сценария d3 в приложении GWT с использованием JSNI

Question

Я пытаюсь интегрировать сценарий d3 в веб-приложение gwt. Однако я не могу понять, как запустить d3 из JSNI. Код d3 работает хорошо по отдельности; Мне интересно, может быть, потому, что код d3 не может получить доступ к элементу div?
Это подход, который я следующее:
+ добавить тег «сценарий» в главном головы HTML файла, чтобы указать библиотеки d3
+ Вставьте следующий код d3 в методе, с помощью JSNI, и вызвать метод in onModuleLoad(). код d3 обращается к основному элементу div, который также использует 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); 

}-*/; 

Я также пробовал другой подход; Я добавил еще один элемент div внутри элемента HTML в классе Java и попытался получить доступ ко второму div из d3.

В обоих случаях ничего не появляется. любая идея, как это может работать, пожалуйста?

Answer 1

У вас read the docs on JSNI?

Для начала:

1. Вы должны include external JS dependencies via the module * .gwt.xml файл.
2. Правильно укажите объем библиотеки через $ wnd и переменные.

Это не садовое разнообразие JS здесь, вам необходимо следовать правилам в своих документах JSNI. См. one из many tutorials об упаковке библиотеки JSNI.

Answer 2

В дополнение к тому, что было сказано ранее, вы также можете ознакомиться с GWT wrapper for Protovis.
d3.js и protovis имеют схожую конструкцию principles (оба разработаны Mike Bostock)

Таким образом, вы можете получить много идей от protovisGWT обертки и, возможно, вы также можете даже реализовать обертку GWT для d3.js.

Answer 3

Я поставил вместе краткий пример того, как интегрировать d3 в GWT:

https://github.com/lgrammel/d3_gwt

В принципе, вы конвертировать ваши Java-объектов в объекты JavaScript с использованием JSNI и передать их в метод JavaScript что содержит код d3:

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 4

очень поздно ответ ...
Но this проект может быть то, что вы хотите:

Это GWT обертка d3.js.