Question

我知道像这样的类似问题之前已经得到了回答，但老实说我已经搜索了几个小时，但没有一个答案帮助我在浏览器中显示一个简单的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;
}

当我在浏览器（Chrome）中打开index.html时，我什么都没看到。我已尝试按照this post和this post的说明操作，但我仍然没有看到任何内容。

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

Answer 1

通过将这些行添加到 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; });

});

D3图表未显示

1 个答案: