Unable to link external Javascript with D3JS

Question

Please refer to think plunk: http://plnkr.co/edit/2lvNHxvLEsNpVqNqmDUX?p=preview

I was trying to draw a circle using D3JS using javascript. My script.js file has the circle defined.

    d3.select("body")
  .append("svg")
    .attr("width",50)
    .attr("height",50)
  .append("circle")
    .attr("cx",25)
    .attr("cy",25)
    .attr("r",25)
    .style("fill","purple");

But it doesn't show up in the html after the D3 circle header. Could someone tell me what I am doing wrong?

<!DOCTYPE html>
<html>

  <head>
    <script data-require="d3@*" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <title>D3JS Demo - Drawing Shapes</title>
  </head>

  <body>
    <h3>SVG Bar</h3>
    <svg>
      <rect width="50" height="200" style="fill:blue"></rect>
    </svg>

    <h3>D3 Bar</h3>
    <script>
      d3.select("body")
        .append("svg")
        .append("rect")
          .attr("widt ah",50)
          .attr("height",200)
            .style("fill","blue");
    </script>

    <h3>SVG Circle</h3>
    <svg width="50" height="50">
      <circle cx="25" cy="25" r="25" style="fill:blue"></circle>
    </svg>

    <h3>D3 Circle</h3>

  </body>

</html>

gaurav5430 · Accepted Answer · 2015-11-30 18:29:05Z

2

you need to add the script after the h3,instead of head, like this:

<h3>D3 Circle</h3>
<script src="script.js"></script>

No body element exists yet at the moment that your script is being executed. That means that d3.select("body") will be empty, if the script is run in head.

http://plnkr.co/edit/Xofci5Rm9XdpsP1zqu8a?p=preview

edited Nov 30, 2015 at 18:29

answered Nov 30, 2015 at 18:25

gaurav5430

14.1k8 gold badges73 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

takeradi Over a year ago

that worked and i will accept your answer but could you please explain why this worked?

takeradi Over a year ago

you just edited the post with the explanation. great! thanks!

Collectives™ on Stack Overflow

Unable to link external Javascript with D3JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related