D3圖表不顯示

我知道類似這樣的問題之前已經回答，但老實說，我一直在尋找幾個小時，沒有答案幫助我得到一個簡單的D3圖像出現在我的瀏覽器。我簡直就是想在瀏覽器中顯示D3條形圖。D3圖表不顯示

這裏是我的文件，我只是從here複製和粘貼。

的Index.html

<!DOCTYPE html> 
<html> 
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
<script src="app.js" type="text/javascript"></script> 
<link rel = "stylesheet" 
    type = "text/css" 
    href = "app.css" /> 
<div class="chart"></div> 
</html>

app.js

var data = [4, 8, 15, 16, 23, 42]; 

var x = d3.scale.linear() 
    .domain([0, d3.max(data)]) 
    .range([0, 420]); 

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

app.css

.chart div { 
    font: 10px sans-serif; 
    background-color: steelblue; 
    text-align: right; 
    padding: 3px; 
    margin: 1px; 
    color: white; 
}

當我打開index.html中瀏覽器（Chrome）我什麼都看不到。我試過按照this post和this post的指示，但我仍然沒有看到任何東西。

我怎樣才能得到這個簡單的圖表出現？非常感謝您的幫助。

來源

2017-08-25 Jon Deaton

您發佈的** Index.html **未鏈接到** app.js **或** app.css **中。 –

好的，這很有道理。我已經添加了''我仍然沒有看到任何東西。 –

看到我的答案。 –

在應用鏈接通過將這些線的Index.html文件：

<script src="app.js"></script> 
<link rel="stylesheet" href="app.css">

環繞你D3代碼在DOMContentLoaded事件，所以它不會運行，直到頁面加載：

document.addEventListener('DOMContentLoaded', function(e) { 
    var data = [4, 8, 15, 16, 23, 42]; 

    var x = d3.scale.linear() 
     .domain([0, d3.max(data)]) 
     .range([0, 420]); 

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

});

來源

2017-08-25 19:04:16

非常感謝，完美的作品。 –

回答

相關問題