为什么我的网页上没有任何显示？
[英]Why is nothing being displayed on my webpage?
问题描述
The following is my code. 
以下是我的代码。 Yet when I run it I get a blank page. 但是，当我运行它时，我得到一个空白页。 Why is this the case ? 为什么会这样呢？ Also how can I use data from hundreds of columns to make a simple interactive visual using d3 ? 另外，如何使用d3使用数百列中的数据来制作简单的交互式视觉效果？ I would like to add that the following csv file "LoanStats3a.csv" is in the same folder. 我要补充一点，以下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>
2 个解决方案
解决方案1
1 已采纳 2016-06-11 20:52:54
This is because after binding the data to your empty selection, you have to append a rect element for each data. 这是因为将数据绑定到空选择之后，您必须为每个数据append一个rect元素。
Also, your attribute "fill" is incorrect. 另外，您的属性“填充”不正确。
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");
If you want to change the color depending on the data, create a function and return something. 如果要根据数据更改颜色，请创建一个函数并return一些内容。
// For example
.attr("fill", function(d){return d.loan_amnt > 25000 ? "blue" : "red"});
Here's a JsFiddle with random data : DEMO 这是带有随机数据的JsFiddle： DEMO
EDIT : If it's still not working, it's probably a problem with your data because the only thing different between our code is that I used custom data in the JsFiddle. 编辑：如果仍然无法正常工作，则可能是您的数据存在问题，因为我们的代码之间唯一的不同是我在JsFiddle中使用了自定义数据。
I notice that your csv file doesn't have the extension .csv , it's just LoanStats3a ? 我注意到您的csv文件没有扩展名.csv ，它只是LoanStats3a吗？
You should do a console.log(file1) , to check if your data are correct. 您应该执行console.log(file1) ，以检查您的数据是否正确。
Take a look at D3 CSV for how to load a csv file. 看看D3 CSV如何加载csv文件。
解决方案2
0 2016-06-11 19:38:18
You are missing a closing ) at the end: 您在结尾缺少) ：
.attr("fill", function (d){"red","blue";});
}
// ^ Here should be a )
</script>
It helps if you have proper indent: 如果您有适当的缩进，它会有所帮助：
<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"; // What is going on here?
// Did you for to return?
// return "blue";
});
});
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.