How do I import the D3 library into my project file structure?

Question

I am trying to not rely on the basic code as follows in my file:

<script src="//d3js.org/d3.v3.min.js"></script>

I am trying to include the d3 library in my file structure. I have created a "libs" file in my project. Here is the link to the page to download the d3 library: https://github.com/d3/d3 My question is after downloading the necessary files from github, do I simply create a d3 folder in my libs folder and place the files there? If so, do I reference a specific file or just the folder?

Solution 1

There are a few different ways of importing other people's code. You could, as you suggested, just download the latest release and copy the d3.js or d3.min.js into a lib/ directory, then import it like so:

<script src="lib/d3.min.js"></script>

Alternatively, if you're using a package manager like npm or bower, you could just install it using that, as recommended in the README. There's also a resource showing how you could use a bundler like Rollup to package D3 with all of your other libraries.

Solution 2

You must include your local copy of D3 like so:

<script src="libs/d3.v3.min.js"></script>

No need to create a separate folder if you'll use just D3. If you need other dependencies use like this:

    <script src="libs/d3/d3.min.js" charset="utf-8"></script>
    <script src="libs/d3/topojson.v1.min.js"></script>
    <script src="libs/d3/d3-queue.v2.min.js"></script>

Comments

[Martin Green]

if I use the node package manager and the npm install command, will I still have to use the <script src='etc.js'></script>?

[Aurora0001]

Yes, you will. It should be installed somewhere in the node_modules folder but you'll be able to import it as normal.