我正在关注官方教程.由于结构相当简陋,我决定做一个更清洁的结构:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
<title>D3</title>
<style>
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
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 d * 10 + "px"; })
.text(function(d) { return d; });
</script>
</head>
<body>
<div class="chart"></div>
</body>
</html>
但这不起作用.这是我得到的错误:
d3.html:20 Uncaught TypeError: Cannot read property 'linear' of undefined
我在D3 api中发现方法scale.linear现在使用scaleLinear调用.
输出错误消失了,但我仍然看不到任何东西,同时使用scale复制示例.线性旧方法有效.
我做错了什么？
你的脚本在上面head,并且在div之前解析它并生成一个类"图表".
只要将您的所有脚本的结束body,之后你选择的div:
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="chart"></div>
<script>
var data = [4, 8, 15, 16, 23, 42];
var x = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, 420]);
d3.select(".chart")
.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function(d) { return d * 10 + "px"; })
.text(function(d) { return d; });
</script>
</body>如果你想保留脚本head,无论出于何种原因,只需更改d3.select(".chart")为d3.select("body"):
div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}<head>
<title>D3</title>
<style>
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var data = [4, 8, 15, 16, 23, 42];
var x = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, 420]);
d3.select("body")
.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function(d) { return d * 10 + "px"; })
.text(function(d) { return d; });
</script>
</head>
<body>
</body>