D3 example workflow in KNIME 3.3 not working

Hi,

Having just updated to KNIME 3.3 I decided to have a play with the JavaScript nodes. I had a look over the blog post about D3 charting (https://www.knime.org/blog/from-d3-example-to-interactive-knime-view-in-10-minutes) and downloaded the workflow to tinker with. As it is, it works fine, but since it uses a deprecated version of the Generic View I thought I’d see if I could run the code in the current version of the node.

Unfortunately it doesn’t work. Without modifying the code at all I get the error: “TypeError: Unable to get property ‘format’ of undefined or null reference” followed by a long stack trace (see attached). The error seems to be centred on RequireJS. Any idea what’s going on there?

I did wonder if it had something to do with versions of D3, since the newer node refers to D3 v4.2.6 while the original code uses v3, as supplied by the older node. So, I tried calling require.config(…) to load D3 v3 and then wrapped the original code in a require(['d3'], function (d3) {…}) function. Sadly no success here either. I don’t get an error, but neither is anything drawn to the canvas. I could be doing something wrong, of course, but does anyone have any ideas why it isn’t drawing?

I’ve attached the workflow, in case anyone wants to have a look.

Finally, is there any plan to develop a more flexible way of loading external libraries? Being able to add library definitions to the Dependencies box in the node dialogue would be really handy.

Cheers,

Richard

Hi Richard,

I had a quick look at your workflow. You are correct in your assumption that D3 v4 is the problem, why the code doesn't run anymore. If you want to adapt the code to work with the new D3, you can take a look at https://github.com/d3/d3/blob/master/CHANGES.md to see what has changed. Basically a lot of the d3 calls have been shortened, which they call the 'great namespace flattening'. Other calls might have been renamed.

To load an older D3 version your code was almost correct, but requireJS works only, if you omit the .js file ending from the path definition. So your config call should look like:

require.config({
    paths: {
        d3: 'https://d3js.org/d3.v3.min'
    }
});

and then it will work.

An easier way to handle user or external libraries in the Generic JavaScript view is on our roadmap, but there is no definite plans for when this will be worked on or released.

Hope this helps you.

Cheers,

Christian