Is there a way to use d3.js in swt composite

Question

I am working on an eclipse plug-in where in I need some kind of data visualization. I find d3's visualization to be very useful. Since d3 is a javascript library, the charts can be displayed in browser. But I want the charts to display on swt composite.

Is there any way to do this...

Answer 1

You can use the SWT browser widget. By default it is linked to IE DLL on windows and XULrunner DLL on linux.

Answer 2

You can use javafx-d3 to interact with d3.js in a JavaFx WebView (which should be able to be integrated in SWT).

How I got a minimal example to run:

First, install javafx-d3 as explained on the github page:

• Get the source code
• You can use the main folder as an Eclipse workspace including two projects:
• Import the two Eclipse Maven projects javafx-d3 and javafx-d3-demo
• Build the maven projects
• Run the demo suite com.github.javafxd3.d3.JavaFxD3DemoSuite
• If you do not get javafx-d3 up and running please create an issue ticket.

(Working in Eclipse I had to solve the problem of a missing 'src/test/java' folder on the way.)

Next I followed this tutorial to integrate the browser from the JavaFxSingleDemo into an SWT shell. (I had to manually import the javafx.embed.swt package - see this thread)

public class SwtIntegrationDemo {

    private static Scene scene;
    private static JavaFxD3Browser browser;

    public static void main(final String[] args) {

        final Display display = new Display();
        final Shell shell = new Shell(display);
        shell.setText("JavaFX / SWT Integration");
        shell.setLayout(new FillLayout());
        final FXCanvas canvas = new FXCanvas(shell, SWT.NONE);        

        //define d3 content as post loading hook
        final Runnable postLoadingHook = () -> {
            System.out.println("Initial loading of browser is finished");
            //do some d3 stuff
            createD3Example();        };

        //create browser
        browser = new JavaFxD3Browser(postLoadingHook, true);

        //create the scene
        scene = new Scene(browser, 750, 500, Color.web("#666970"));
        canvas.setScene(scene);
        shell.open();

        while (!shell.isDisposed()) {
            if (!display.readAndDispatch())
                display.sleep();
        }
        display.dispose();    
    }

    private static void createD3Example() {
        // code from JavaFxD3SingleDemo.java
    }
}