想要构建类似于Mike Bostock did的趋势线。
数据集存在差异:在第一列,我的数字代表年份(2000),迈克有一个日期(2007年4月24日) )
目标:我希望x轴显示年份。
问题:由于一些奇怪的原因,它显示了其他一些数字。
动作:
.index.html:
<!DOCTYPE html>
<title>Plotting a Trendline with D3.js</title>
<svg width="960" height="500"></svg>
<script src="d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 30, left: 50},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var parseTime = d3.timeParse("%y");
var x = d3.scaleTime()
.rangeRound([0, width]);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var line = d3.line()
.x(function(d) { return x(d.ano); })
.y(function(d) { return y(d.total); });
d3.tsv("data.tsv", function(d) {
d.ano = d.ano;
d.total = +d.total;
return d;
}, function(error, data) {
if (error) throw error;
x.domain(d3.extent(data, function(d) { return d.ano; }));
y.domain(d3.extent(data, function(d) { return d.total; }));
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.select(".domain")
.remove();
g.append("g")
.call(d3.axisLeft(y))
.append("text")
.attr("fill", "#000")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("Numero de acidentes mortais");
g.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("stroke-width", 1.5)
.attr("d", line);
});
</script>
.data.tsv:
ano total
2000 368
2001 365
2002 357
2003 312
2004 306
2005 300
2006 253
2007 276
2008 231
2009 217
2010 208
2011 196
2012 175
2013 160
我该怎么做才能解决这个问题?
答案 0 :(得分:2)
只需更改时间解析功能(您应该使用大写的Y
):
var parseTime = d3.timeParse("%Y");
工作演示(我用硬编码的tsv数据来简化示例):
var dataAsTsv = `ano total
2000 368
2001 365
2002 357
2003 312
2004 306
2005 300
2006 253
2007 276
2008 231
2009 217
2010 208
2011 196
2012 175
2013 160`;
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 30, left: 50},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var parseTime = d3.timeParse("%Y");
var x = d3.scaleTime()
.rangeRound([0, width]);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var line = d3.line()
.x(function(d) { return x(d.ano); })
.y(function(d) { return y(d.total); });
function processData(d) {
d.ano = parseTime(d.ano);
d.total = +d.total;
return d;
};
var data = d3.tsvParse(dataAsTsv, processData);
x.domain(d3.extent(data, function(d) { return d.ano; }));
y.domain(d3.extent(data, function(d) { return d.total; }));
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.select(".domain")
.remove();
g.append("g")
.call(d3.axisLeft(y))
.append("text")
.attr("fill", "#000")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("Numero de acidentes mortais");
g.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("stroke-width", 1.5)
.attr("d", line);
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.2/d3.min.js"></script>
<svg width="960" height="500"></svg>
&#13;