Javascript 在DOM上运行D3代码，无需jquery_Javascript_D3.js_Mamp

Javascript 在DOM上运行D3代码，无需jquery

javascript d3.js

Javascript 在DOM上运行D3代码，无需jquery,javascript,d3.js,mamp,Javascript,D3.js,Mamp,按照SO问题/答案的建议，我将D3代码放在html下面，并放在一个函数中，该函数在加载时执行onload，但是，当我在我的MAMP本地服务器上测试时，D3代码没有执行。注意，如果我在控制台中运行runD3code，则会显示预期的条形图，但如果我将该代码包含在index.html中的runD3code函数中，则不会显示条形图。我还注意到，在html下面包含D3是库作者的做法您能建议解决此问题的方法吗？问题是您的html文件无效。语法错误太多 <!DOCTYPE html> <h

按照SO问题/答案的建议，我将D3代码放在html下面，并放在一个函数中，该函数在加载时执行

onload

，但是，当我在我的MAMP本地服务器上测试时，D3代码没有执行。注意，如果我在控制台中运行

runD3code

，则会显示预期的条形图，但如果我将该代码包含在index.html中的

runD3code

函数中，则不会显示条形图。我还注意到，在html下面包含D3是库作者的做法

您能建议解决此问题的方法吗？

问题是您的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>


.海图组{
字体：10px无衬线；
背景颜色：钢蓝色；
文本对齐：右对齐；
填充：3倍；
保证金：1px；
颜色：白色；
}
window.onload=函数runD3code（）{
log（“未被调用”）；
var数据=[4,8,15,16,23,42]；
d3.选择（“图表”）
.selectAll（“div”）
.数据（数据）
.enter（）.append（“div”）
.style（“宽度”，函数（d）{返回d*10+“px”；}）
.text（函数（d）{return d；}）；
};

您的html页面在使用MAMP服务器时对我不起作用。现在，您已经更改了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; });

        };
})()

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