Can D3 library be used with the Electron (Atom shell)?

Question

Electron's website says that the applications made with electron can have access to node modules. Can they have access to the D3 library? If so, how can it be set up?

Answer 1

D3 is available as a Node.js module that can be imported into the JavaScript code you want to use to render your visualisation application.

As an example of how to integrate D3 into an Electron application, have a look at my D3 Space Filler Explorer application on GitHub. This application visualises disk space use with multiple D3 pie charts and a D3 treemap.

One pattern I found useful was to inject the SVG element into the D3 visualisation, which differs from the usual approach in D3 examples which creates the SVG element in the visualisation. See examples of this dependency injection in the /app/js/pie-chart.js and /app/js/treemap-chart.js files.

Answer 2

All (at least theoretically) pure JS modules are compatible with electron, since it also provides a (CommonJS) javascript runtime environment (io.js).

The only important thing is that electron doesn't automatically sets the NODE_PATH variable and doesn't look in system/global modules path for require d modules. So you just have to make sure that you have the path to d3.js on your NODE_PATH :

NODE_PATH="/PATH/TO/d3.js" electron /PATH/TO/APP

Answer 3

We solved this in our workteam installing d3 with Npm:

npm install d3 --save

and in index.html we put this:

<script>var d3 = require("d3")</script>

We were getting this issue from nv.d3.js line 18, there is a little function requiring d3 as a node module and in our app we were using it in bower_components, so installing it with npm and requesting in your index directly from node_modules like as I said will probably solve this issue as it did with us.