var margin = {top: 30, right: 20, bottom: 60, left: 80},
width = 1300 - margin.left - margin.right,
height = 450 - margin.top - margin.bottom;
var x_scale = d3.time.scale().range([0, width], 0.2, 0.2);
//console.log(x_scale)
var y_scale = d3.scale.linear().range([height, 0]);
//console.log(y_scale)
//axis, definição do conteudo dos eixos
var x_axis = d3.svg.axis().scale(x_scale)
.orient("bottom")
.ticks(32); //numero de anos em analise
//console.log(x_axis)
var y_axis = d3.svg.axis().scale(y_scale)
.orient("left")
.ticks(20);
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
//var parser = d3.time.format("%Y");
d3.csv("master.csv", function(error,data){
if(error) console.log("Erro no ficheiro csv");
data.forEach(function(d){
d.year = +d.year;
d.suicides_no = +d.suicides_no;
});
//console.log(data)
var yearEvolution = d3.nest()
.key(function(d){return d.year; })
.rollup(function(leaves){
return d3.mean(
leaves, function(d) {
return d.suicides_no;});
})
.entries(data);
console.log(yearEvolution);
//x_scale.domain(d3.extent(yearEvolution, function(d) { return d.key; }));
x_scale.domain(d3.extent(yearEvolution, function(d) { return d.key; }));
y_scale.domain([0, d3.max(yearEvolution, function(d) { return d.values+20; })]);
console.log(x_scale)
// var circles = svg.selectAll("circle")
// .data(yearEvolution)
// .enter()
// .append("circle")
// .attr("cx", function (d) {
// return x_scale(d.keys);
// })
// .attr("cy", function (d) {
// return y_scale(d.values);
// })
// .attr("r", function (d) {
// return 10;
// });
var line = d3.svg.line()
.x(function(d) { return x_scale(d.key); })
.y(function(d) { return y_scale(d.values); });
d3.select("svg")
.append("path")
.attr("d", line(yearEvolution))
.attr("class", "linha");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(x_axis)
.selectAll('text')
.attr("transform", "rotate(-60)")
.attr("dx", "-.8em")
.attr("dy", ".25em")
.style("text-anchor", "end")
.style("font-size", "14px");
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(y_axis);
});
使用此代码,我想显示一条图形线。成为所需nest
的{{1}},即每年(从1985年到2016年)自杀的次数。
我不认为我正在获得这些价值观,是我用错误的方式称呼它们吗?在代码的这一部分中,应该访问日期的值,并在行的行号上给出指示。
我根据在data
的帮助下处理的数据留下了深刻的印象,但是该数据没有出现在图形中,知道为什么吗?