在没有jquery的DOM上运行D3代码

running D3 code on DOM ready without jquery

本文关键字：运行 D3 代码 DOM jquery      更新时间：2023-09-26

根据这个SO问题/答案的建议，我把我的D3代码在html下面，并在执行onload的函数内，然而，当我在我的MAMP本地服务器上测试时，D3代码没有执行。注意，如果我在控制台中运行runD3code，则会出现预期的条形图，但如果我在index.html中的runD3code函数中包含该代码，则条形图不会出现。我还注意到，在html下面包含D3是库作者在这里所做的。

<!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>

然后，我甚至试着把它放在一个文档准备等效，但D3代码仍然没有运行

       (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; });
        };
})()
你能建议一个解决这个问题的方法吗?

问题是您的html文件无效。语法错误太多

<!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>
相关文章：