[英]Why is nothing being displayed on the webpage?
文件“LoanStats3a.csv”位於同一文件夾中。 然而不知何故,這是行不通的。 此外,由於數量太大,我正在為他的線潛水 x 和 y 值,但是,這應該為它們分配正常值。
<html>
<title>Loans</title>
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<style>
#LoanStats3a {
color: blueviolet;
}
</style>
<body>
<script>
d3.csv("LoanStats3a.csv", function (file1) {
var bg = d3.select("body").append("svg")
.attr("width", 5000)
.attr("height", 5000);
var data1 = [{
x: d.loan_amnt,
y: d.term
},
{
x: d.int_rate,
y: d.annual_inc
},
{
x: d.member_id,
y: d.id
}
];
var group = bg.append("g")
.attr("transform", "translate (100,100)");
var line = d3.svg.line("line")
.x(function (d) {
return d.x / 100;
})
.y(function (d) {
return d.y / 100;
});
bg.selectAll("path")
.data(file1)
.enter()
.append("line")
.attr("cx", 500)
.attr("cy", 500)
.attr("d", line)
.attr("fill", "black")
.attr("stroke", "black")
.attr("stroke-width", 20);
});
</script>
</body>
</html>
此外,這是我使用本地數據時的代碼,但仍然沒有顯示任何內容:
<html>
<title>Loans</title>
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<style>
#LoanStats3a {
color: blueviolet;
}
</style>
<body>
<script>
d3.csv("LoanStats3a.csv", function (file1) {
var bg = d3.select("body").append("svg")
.attr("width", 5000)
.attr("height", 5000);
var data1 = [
//{x:d.loan_amnt , y : d.term},
//{x:d.int_rate , y : d.annual_inc},
//{x:d.member_id , y : d.id}
{
x: 10,
y: 20
},
{
x: 30,
y: 40
},
{
x: 50,
y: 60
}
];
var group = bg.append("g")
.attr("transform", "translate (100,100)");
var line = d3.svg.line()
.x(function (d) {
return d.x / 100;
})
.y(function (d) {
return d.y / 100;
});
bg.selectAll("path")
.data([data1])
.enter()
.append("line")
.attr("cx", 500)
.attr("cy", 500)
.attr("d", line)
.attr("fill", "black")
.attr("stroke", "black")
.attr("stroke-width", 20);
});
</script>
</body>
</html>
這是您問題的解決方案
你並沒有那么遠
var svg = d3.select("body") .append("svg") .attr("width", 5000) .attr("height", 5000) .append("g") .attr("transform", "translate(100,100)"); var arc = d3.svg.arc() .innerRadius(80) .outerRadius(100) .startAngle(0) .endAngle((100 * Math.PI)-1); svg.append("path") .attr("class", "arc") .attr("d", arc);
.arc { fill: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.