Fatal编程技术网
  • d3.js/
  • D3.js D3图表未显示

D3.js D3图表未显示

d3.js

D3.js D3图表未显示,d3.js,D3.js,我知道类似的问题以前也有人回答过，但老实说，我已经搜索了几个小时，没有一个答案能帮助我在浏览器中显示一个简单的D3图像。我只是想在浏览器中显示一个D3条形图 这是我的文件，我只是从中复制和粘贴 Index.html <!DOCTYPE html> <html> <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="app.js"

我知道类似的问题以前也有人回答过，但老实说，我已经搜索了几个小时，没有一个答案能帮助我在浏览器中显示一个简单的D3图像。我只是想在浏览器中显示一个D3条形图

这是我的文件，我只是从中复制和粘贴

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.css

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; });

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}
当我在浏览器（Chrome）中打开index.html时，我什么也看不到。我试着按照他的指示去做，但还是一无所获

如何使这个简单的图表显示出来？非常感谢您的帮助。

通过将以下行添加到Index.html中，链接您的应用程序文件：

<script src="app.js"></script>
<link rel="stylesheet" href="app.css">
你发布的Index.html在app.js或app.css中没有链接。好吧，这很有意义。我已经添加了
，但仍然没有看到任何内容。请查看我的答案。 
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; });

});