CODEWITHSUNDEEP
javascripthtmld3.js
kayasa
kayasa

Reputation: 2085

D3.js - Appending to <div> not working

I am facing a very strange problem.

If I try to append rectangles to body it works fine. However, if I try to append to <div> - it does not work

What makes it even strange is that, on Fiddler both versions work.

https://jsfiddle.net/ek6xmbs2/

However, on my laptop 

d3.select("#chart").append("svg")

does not work (displays a blank screen). While the below works

d3.select("body").append("svg")

Saw a similar issue here

D3 JS append to div weird result

However, can't make out from the response as to what fixed it.

Thank you.

Upvotes: 3

Views: 1759

Answers (1)

scniro
scniro

Reputation: 16989

Blank screen is due to exceptions thrown within your Original Fiddle. Open your dev tools and notice the error trying to load d3.js. Specifically...

Mixed Content: The page at 'https://fiddle.jshell.net/_display/' was loaded over HTTPS, but requested an insecure script 'http://d3js.org/d3.v3.min.js'. This request has been blocked; the content must be served over HTTPS.

This of course throws the immediate exception of

Uncaught ReferenceError: d3 is not defined

So, outside the scope of this not working in a fiddle-the code works fine.

d3.select("#chart").append("svg")

JSFiddle Link - Works as expected

What's different? I change my <script> source per errors relayed to me

Edit

Per discussion, code referenced is likely firing before the DOM is loaded. Wrapping code with the following will solve the issue

window.onload = function () {
    // ...
    d3.select("#chart").append("svg")
    // ...
}

Updated JSFiddle - DOM Ready

Upvotes: 2

Related Questions