想要建立一条类似于 Mike Bostock did 的趋势线.
数据集有所不同:在第一列中，我的数字代表年份(2000)，而 Mike 的数字代表日期(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
我该如何解决这个问题？
最佳答案
只需更改您的时间解析函数(您应该使用大写的 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);<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.2/d3.min.js"></script>
<svg width="960" height="500"></svg>关于javascript - D3.js 趋势线 x 轴日期，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48476362/