The file "LoanStats3a.csv" is in the same folder. Yet somehow this is not working. Also I am diving the x and y values fort he lines because the amount is too large, however, this should assign them normal values.
<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>
Furthermore, here is the code when I use local data and still nothing is displayed:
<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>
Here is a solution to your problem
You are not that far off
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.