Search code examples
javascriptd3.jsmamp

running D3 code on DOM ready without jquery

Following the advice of this SO question/answer, I put my D3 code below the html and inside a function that's executed onload, however, when I test this on my MAMP local server, D3 code is not executing. Note, if I run the runD3code in the console then the intended bar chart appears, but if I included that code inside the runD3code function in index.html then the bar chart doesn't appear. I also note that including the D3 below the html is how the library author does it here. 

<!DOCTYPE html>
<meta charset="utf-8">


    <style type="text/css">   
      .chart div {
        font: 10px sans-serif;
        background-color: steelblue;
        text-align: right;
        padding: 3px;
        margin: 1px;
        color: white;
      }
    </style>

  <body onload="runD3code()">
      <div class="chart">

      </div>
        <script src="./d3.js" charset="utf-8">
       <script>
       function runD3code() {
        console.log("not getting called");
         var data = [4, 8, 15, 16, 23, 42];
           d3.select(".chart")
            .selectAll("div")
            .data(data)
          .enter().append("div")
            .style("width", function(d) { return d * 10 + "px"; })
            .text(function(d) { return d; });
        }
        </script>

  </body>

Then, I even tried putting it in a document ready equivalent, but the D3 code still didn't run

       (function(){
    var tId = setInterval(function(){if(document.readyState == "complete") onComplete()},11);
    function onComplete(){
        clearInterval(tId);    

         var data = [4, 8, 15, 16, 23, 42];
           d3.select(".chart")
            .selectAll("div")
            .data(data)
          .enter().append("div")
            .style("width", function(d) { return d * 10 + "px"; })
            .text(function(d) { return d; });

        };
})()

Can you suggest a solution to this problem?

Solution

  • The problem is your html file is invalid. Too many bugs in syntax.

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <style type="text/css">   
      .chart div {
        font: 10px sans-serif;
        background-color: steelblue;
        text-align: right;
        padding: 3px;
        margin: 1px;
        color: white;
      }
    </style>
  </head>
  <body>
    <div class="chart"></div>
    <script src="./d3.js" charset="utf-8"></script>
    <script>
       window.onload = function runD3code() {
        console.log("not getting called");
         var data = [4, 8, 15, 16, 23, 42];
           d3.select(".chart")
            .selectAll("div")
            .data(data)
          .enter().append("div")
            .style("width", function(d) { return d * 10 + "px"; })
            .text(function(d) { return d; });
        };
     </script>

  </body>
</html>