gpt4 book ai didi

javascript - 为什么我的网页上没有显示任何内容?

转载 作者:行者123 更新时间:2023-12-03 06:45:15 26 4
gpt4 key购买 nike

以下是我的代码。然而,当我运行它时,我得到一个空白页。为什么会这样呢?另外,如何使用 d3 使用数百列的数据来制作简单的交互式视觉效果?我想补充一下,以下 csv 文件“LoanStats3a.csv”位于同一文件夹中。

 <html>
<title>Loans</title>
<link href="../css/jquery-ui.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.12.4"></script>
<script src="../Scripts/jquery-1.12.4.js"></script>
<script src="../Scripts/jquery-ui.js"></script>
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<style>
#LoanStats3a{
color: blueviolet;
}
</style>
<body>
<script>
d3.csv("LoanStats3a", function (file1){
var bg = d3.select("body").append("svg")
.attr("width", 5000)
.attr("height", 5000);

bg.selectAll("rect")
.data(file1)
.enter()
.attr("width", function(d){return d.loan_amnt / 100;})
.attr("height", function(d) {return d.term;})
.attr("y", function (d,i) {return i *50;})
.attr("fill", function (d){"red","blue";});
}
</script>
</body>

最佳答案

这是因为将数据绑定(bind)到空选择后,您必须为每个数据附加一个 rect 元素。

此外,您的属性“fill”不正确。

bg.selectAll("rect")
.data(file1)
.enter()
.append("rect") // <= You need to create a rect for each data
.attr("width", function(d){return d.loan_amnt / 100;})
.attr("height", function(d) {return d.term;})
.attr("y", function (d,i) {return i *50;})
.attr("fill", "blue");

如果您想根据数据更改颜色,请创建一个函数并返回某些内容。

// For example
.attr("fill", function(d){return d.loan_amnt > 25000 ? "blue" : "red"});

这是一个带有随机数据的 JsFiddle :DEMO

编辑:如果仍然无法正常工作,则可能是您的数据存在问题,因为我们的代码之间唯一的不同之处是我在 JsFiddle 中使用了自定义数据。

我注意到您的 csv 文件没有扩展名 .csv,它只是 LoanStats3a
您应该执行 console.log(file1),以检查您的数据是否正确。

看看D3 CSV了解如何加载 csv 文件。

关于javascript - 为什么我的网页上没有显示任何内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37767773/

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