13

currently i am adding all javascript at HTML <head> after uglying as file & using these jquery functions to check document ready

$( document ).ready(function() {}); OR $(function() {});

is there any d3js equivalent to remove using of these jquery functions ?

linto cheeran
  • 1,440
  • 1
  • 17
  • 30
  • Not sure exactly what you're looking for, but here's a plain Javascript replacement for `$(document).ready()`: [pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it](http://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the/9899701#9899701) which includes options to just relocate the script tag. – jfriend00 Dec 26 '15 at 10:51
  • @jfriend00 i am looking to remove jquery from application but the only dependancy is $(function() {}); – linto cheeran Dec 26 '15 at 14:14
  • probably duplicate of http://stackoverflow.com/questions/7169370/d3-js-and-document-onready – Cyril Cherian Dec 26 '15 at 14:36
  • Then, my link is something you can use since it is a plain Javascript replacement for `$(document).ready()`. – jfriend00 Dec 26 '15 at 18:56

3 Answers3

13

A

You can simply put the <script> tag at the bottom of the body tag.

B

you can add the DOMContentLoaded event and insert your d3js code inside.

document.addEventListener("DOMContentLoaded", function(e) {
   /* Your D3.js here */
  });

Direct Answer

There is no equivalent to the jQuery function in the D3.js library, the snippet written above will work as well.

Hulke
  • 847
  • 5
  • 22
6

There is no specific d3 way but,

if your javascript is below any of the html elements then the dom is loaded before it starts executing the javascript.

Putting your javascript at the bottom of the body is usually good enough. You can also use native js method which works in most of the browsers.

document.addEventListener("DOMContentLoaded", function(event) { 
  //do work
});
Fawzan
  • 4,738
  • 8
  • 41
  • 85
1

According to selection.on() docs, any event type can be used in it, so

d3.select(document).on("DOMContentLoaded", function(event) { ... });

could be called the "d3 way".

However, note that whichever way you subscribe to DOMContentLoaded, it's not equivalent to .ready():

However, jQuery's .ready() method differs in an important and useful way: If the DOM becomes ready and the browser fires DOMContentLoaded before the code calls .ready( handler ), the function handler will still be executed. -- source

TWiStErRob
  • 44,762
  • 26
  • 170
  • 254