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

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

回答

相关问题