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

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

4 голосов
/ 22 марта 2012

Я пытаюсь интегрировать скрипт d3 в веб-приложение gwt.Однако я не могу понять, как запустить d3 из JSNI.Код d3 хорошо работает отдельно;Мне интересно, это может быть потому, что код d3 не может получить доступ к элементу div?
Я придерживаюсь следующего подхода:
+ добавьте теги 'script' в заголовок основного html-файла, чтобы указать библиотеки d3
+ Поместите следующий код d3 в метод с использованием JSNIвызовите метод в 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.

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

Ответы [ 4 ]

9 голосов
/ 31 мая 2012

Я собрал короткий пример того, как интегрировать 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

5 голосов
/ 22 марта 2012

Вы читали документы по JSNI ?

Для начала:

  1. Вы должны включить внешние зависимости JS через модуль * .gwt.xml file.
  2. Правильно указывайте область видимости библиотеки через $ wnd и this переменных.

ThisЭто не садовый сорт JS, вы должны следовать правилам в своих документах JSNI.См. one из много учебников об использовании библиотеки JSNI там.

2 голосов
/ 23 марта 2012

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

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

1 голос
/ 11 ноября 2015

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

Это оболочка GWT вокруг d3.js.

...