CODEWITHSUNDEEP
javascriptd3.js
user1899082
user1899082

Reputation:

Simplest D3.js example not working

I have this in my index.html file but it does not show the paragraph that I want to add with D3

<!DOCTYPE html>
<html>
  <head>
    <title> D3 page template </title>
    <script type="text/javascript" src = "d3/d3.v3.js"></script> 
  </head>

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

The path to where I am referencing D3.js should be correct because if I do an inspect element in the browser I can click on the D3 link and it takes me to its source code.

enter image description here

Upvotes: 9

Views: 15413

Answers (3)

SZT
SZT

Reputation: 1966

Was having similar issue. My problem was my script file was loading before it could load the d3js library. Just adding defer fixed the issue.

<script src="app.js" defer></script>

Upvotes: 1

Frison Alexander
Frison Alexander

Reputation: 3256

I am going to assume that you are testing this out without a web server. If so, then your URL will read file://.... not http://..

With this, the Javascript request will go to file:///.../D3/d3/d3.v3.js which won't have the proper response header set, such as charset and MIME.

You can always get it from a CDN to avoid this problem: 

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

Upvotes: 7

Steve P
Steve P

Reputation: 19377

You are missing the character set in your HTML page. Add something like this:

<meta charset="utf-8">

The un-minified source of D3 includes the actual symbol for pi, which confuses the browser if the character set is not defined.

Upvotes: 16

Related Questions