gpt4 book ai didi

javascript - 简单的 D3 演示不适用于更改的结构

转载 作者:行者123 更新时间:2023-11-28 13:15:09 25 4
gpt4 key购买 nike

我正在关注 official教程。由于结构相当简陋,我决定做一个更干净的结构:

<!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中找到了现在使用scaleLinear 调用方法scale.linear。

输出错误消失了,但我仍然看不到任何东西,而使用scale.linear旧方法复制粘贴示例却有效。

我做错了什么?

最佳答案

您的脚本位于 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 (“正文”):

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>

关于javascript - 简单的 D3 演示不适用于更改的结构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39116922/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com