d3js簡單條形圖沒有顯示

我已經從這裏提供https://scrimba.com/casts/cast-1953 d3js簡單條形圖沒有顯示

但是，沒有圖中示出的例子中複製下面的代碼。我也沒有在控制檯中的錯誤。當我在控制檯中輸入d3時，會返回一個對象，因此會找到d3。

我錯過了什麼？

<head> 
    <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script> 

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

    <script type="text/javascript"> 

    var data = [30, 86, 168, 281, 303, 365]; 

    d3.select(".chart") 
     .selectAll("div") 
     .data(data) 
     .enter() 
     .append("div") 
     .style("width", function (d) { return d + "px"; }) 
     .text(function (d) { return d; }); 


    </script> 
</head> 

<body> 

    <div class="chart"></div> 

</body>

來源

2017-08-12 Flo

而不是在頭部使用腳本，嘗試在頁面的底部使用或使用時，頁面準備好了。

<head> 
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script> 

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

<div class="chart"></div> 


<script type="text/javascript"> 


var data = [30, 86, 168, 281, 303, 365]; 

d3.select(".chart") 
    .selectAll("div") 
    .data(data) 
    .enter() 
    .append("div") 
    .style("width", function (d) { return d + "px"; }) 
    .text(function (d) { return d; }); 

</script>

來源

2017-08-12 20:57:53

您必須將身體腳本之前，像這樣：

<body> 
 

 
    <div class="chart"></div> 
 

 
</body> 
 
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script> 
 

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

 
<script type="text/javascript"> 
 
    var data = [30, 86, 168, 281, 303, 365]; 
 

 
    d3.select(".chart") 
 
    .selectAll("div") 
 
    .data(data) 
 
    .enter() 
 
    .append("div") 
 
    .style("width", function(d) { 
 
     return d + "px"; 
 
    }) 
 
    .text(function(d) { 
 
     return d; 
 
    }); 
 
</script>

來源

2017-08-12 20:57:09 magjac

d3js簡單條形圖沒有顯示

回答

相關問題