How to determine if i have implemented d3 correctly?

Question

Forgive me for this beginner question. I am trying to implement d3 on a HTML page, which is displayed in a JScrollPane in a Swing project. Am following the tutorial @ http://alignedleft.com/tutorials/d3/adding-elements.

As I type code, I do not see template proposals after every dot. Would not like to run it on a temp server at the moment. The new paragraph that's supposedly generated when I run the application does not appear.

Does that mean that my source link to d3 is implemented wrongly & hence no template proposals? Is there any way to determine if elements from the DOM are selected correctly? Elements not embedded within the script is shown correctly however. Please advise.

Code:

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset="utf-8">
        <title>D3 test</title>
        <script type = "text / javascript" src="d3/d3.v3.js"></script>
    </head>

    <body>
        <script type = "text / javascript" src="d3.js">
            d3.select("body").append("p").text("New paragraph!!!");
        </script>

    </body>
</html>

the other class:

        jfxpanel = new JFXPanel();      
        Platform.runLater(new Runnable() {
            @Override
            public void run() {             
                try {
                    WebView browser = new WebView();
                    WebEngine engine = browser.getEngine();
                    //String url = "http://www.hotmail.com";

                    File f = new File ("src/d3/index.html");    //display local html, instead of external webpage
                    System.out.println("current directory: " + f.getAbsolutePath());
                    String url = f.toURI().toURL().toString();
                    engine.load(url);

                    Scene scene = new Scene(browser);
                    jfxpanel.setScene(scene);
                }
                catch (Exception e){
                    while (e != null) {
                        e.printStackTrace();
                    }
                }
            }
        });

        spVisual = new JScrollPane(jfxpanel);
        //spVisual.setEnabled(false);
        spVisual.setViewportBorder(new EtchedBorder(EtchedBorder.LOWERED, null, null));
        spVisual.setSize(800, 420);
        spVisual.setLocation(100, 140);
        spVisual.setVerticalScrollBarPolicy(ScrollPaneConstants.VERTICAL_SCROLLBAR_AS_NEEDED);
        //spVisual.setVerticalScrollBarPolicy(javax.swing.ScrollPaneConstants.VERTICAL_SCROLLBAR_AS_NEEDED);
        spVisual.setHorizontalScrollBarPolicy(ScrollPaneConstants.HORIZONTAL_SCROLLBAR_AS_NEEDED);
        SwingUtilities.invokeLater(new Runnable() {
              public void run() {
                  spVisual.getViewport().setViewPosition(new java.awt.Point(0, 0));
              }
        }); 

        add (spVisual);

By Swing and `JScrollPane` which actual rendering component are you referring to, `JEditorPane`? Note that no Swing 'HTML aware' component will act on JS. — Andrew Thompson, Feb 11 '15 at 22:54
thank you. i meant that i placed a jfxpanel into a jscrollpane, and wish to display a browser within it. that was successful, when i referred the jfxpanel to index.html. it was then i couldnt apply d3 to display the elements within the Swing application. — miiike test, Feb 12 '15 at 04:34
sorry, may I know what is meant by "html aware" component? does that mean that d3 will not work on the JFXPanel? — miiike test, Feb 12 '15 at 04:44
*""html aware" component"* Basically something that can render HTML. E.G. **not** `JTextArea`, but `JEditorPane` and `JTextPane` as well as `JLabel` are all 'HTML aware'.. — Andrew Thompson, Feb 12 '15 at 04:46

score 1 · Answer 1 · edited May 23 '17 at 12:05

Don't know anything about embedding html in swing but I do know that, using src and inline javascript on the same tag is not a good idea.

Also that TEST is within a <script> tag, so it'll be executed as javascript and it's not valid.

Finally, you assuming d3 is loading, your selector, append and text are fine.

Perhaps try:

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset="utf-8">
        <title>D3 test</title>
        <script src="d3/d3.v3.js"></script>
    </head>

    <body>
        <script>
            d3.select("body").append("p").text("New paragraph!!!");                
        </script>
        TEST
    </body>
</html>

thank you, but i tried that already b4 i posted the qn.d3 not working still.some say it's a permission issue.stumped! — miiike test, Feb 11 '15 at 19:30

How to determine if i have implemented d3 correctly?

1 Answers1

Linked