文件“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>
关于javascript - 为什么网页上不显示任何内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37770313/