d3 select element not working when code above the html element

Question

This works    lt div id  chart  gt  lt  div gt   lt script gt var svg   d3 select   chart   append  svg svg    lt  script gt    This doesn t    lt script gt var svg   d3 select   chart   append  svg svg    lt  script gt   lt div id  chart  gt  lt  div gt    I tried wrapping the code in a jquery document ready    grabbing the element with jquery  and passing it into d3 select  but that didn t work either  Edit Once I got the jquery document ready   syntax right  it worked   Any way I can include the javascript at the top of the page and still select an element below  Thanks

User · Answer

Not enough reputation to comment yet so I'll just put this here:

To expand on Micah's answer - the browser runs your code top to bottom, so if you write:

<div id="chart"></div>
<script>var svg = d3.select("#chart").append("svg:svg");</script>

The browser will create a div with id "chart", and then run your script, which will try to find that div, and, hurray, success.

Otherwise if you write:

<script>var svg = d3.select("#chart").append("svg:svg");</script>
<div id="chart"></div>

The browser runs your script, and tries to find a div with id chart, but it hasn't been created yet so it fails.

THEN the browser creates a div with id "chart".

User · Answer

Use jQuery   document  function       document  ready function     var margin    top  20  right  20  bottom  30  left  40       width   960 - margin left - margin right      height   500 - margin top - margin bottom   var x0   d3 scale ordinal        rangeRoundBands  0  width    1    var x1   d3 scale ordinal     var y   d3 scale linear        range  height  0     var color   d3 scale ordinal        range    98abc5     8a89a6     7b6888     6b486b     a05d56     d0743c     ff8c00      var xAxis   d3 svg axis        scale x0       orient  bottom     var yAxis   d3 svg axis        scale y       orient  left        tickFormat d3 format   2s        d3 select   chart svg     d3 select  body   append  svg           var svg   d3 select   chart   append  svg svg         var svg   d3 select   BarChart   append  svg svg        attr  width   width   margin left   margin right       attr  height   height   margin top   margin bottom       append  g        attr  transform    translate     margin left         margin top              var updateData   function getData        d3 selectAll  svg  gt  g  gt      remove         d3 csv getData  function error  data          if  error  throw error         var ageNames   d3 keys data 0   filter function key    return key      State              data forEach function d            d ages   ageNames map function name    return  name  name  value   d name                         x0 domain data map function d    return d State             x1 domain ageNames  rangeRoundBands  0  x0 rangeBand            y domain  0  d3 max data  function d    return d3 max d ages  function d    return d value                   svg append  g              attr  class    x axis              attr  transform    translate 0     height                   call xAxis          svg append  g              attr  class    y axis              call yAxis           append  text              attr  transform    rotate -90               attr  y   6             attr  dy     71em              style  text-anchor    end              text  Population           var state   svg selectAll   state              data data           enter   append  g              attr  class    state              attr  transform   function d    return  translate     x0 d State      0               state selectAll  rect              data function d    return d ages              enter   append  rect              attr  width   x1 rangeBand               attr  x   function d    return x1 d name                 attr  y   function d    return y d value                 attr  height   function d    return height - y d value                 style  fill   function d    return color d name              var legend   svg selectAll   legend              data ageNames slice   reverse             enter   append  g              attr  class    legend              attr  transform   function d  i    return  translate 0     i   20                   legend append  rect              attr  x   width - 18             attr  width   18             attr  height   18             style  fill   color          legend append  text              attr  x   width - 24             attr  y   9             attr  dy     35em              style  text-anchor    end              text function d    return d                   updateData  data1 csv

User · Answer

just add your   lt script src    custom js  gt  lt  script gt  before  lt  bod gt  tag  that is supply  time to  d3 select  chart   detect your  chart element in html body

User · Answer

I just found out that if your element id is just a number  then d3 select  1234    will not work   The unique id needs to be an alpha-numeric character   d3 select  1234    d3 select  container1234

User · Answer

lt script gt   function   var svg   d3 select   chart   append  svg svg       lt  script gt   lt div id  chart  gt  lt  div gt    In other words  it s not happening because you can t query against something that doesn t exist yet-- so just do it after the page loads  here via jquery    Btw  its recommended that you place your JS files before the close of your body tag

User · Answer

Please try this approach  It worked for me    lt head gt    lt script  type  text javascript  src    d3 v4 min js  gt  lt  script gt   lt  head gt     lt body gt       lt div id  jschart41448  style  color red  gt          Hi red      lt  div gt        lt div id  jschart41449  style  color blueviolet  gt          Hi blueviolet      lt  div gt     lt script type  text javascript     gt              d3 select   jschart41448   style  color    green    null               d3 select   jschart41449   style  color    yellow   null    lt  script gt   lt  body gt

[d3.js] d3.select("#element") not working when code above the html element

Examples related to d3.js