Javascript D3.js趋势线x轴日期_Javascript_D3.js

Javascript D3.js趋势线x轴日期

javascript d3.js

Javascript D3.js趋势线x轴日期,javascript,d3.js,Javascript,D3.js,想要建立一个类似于什么的趋势线数据集中有一个不同点：在第一列，我的数据代表年份（2000），迈克的数据代表日期（2007年4月24日）我得到的结果如下：目标：我希望x轴显示年份问题：出于某种奇怪的原因，它显示了一些其他数字行动： .index.html：我能做些什么来解决这个问题？只要更改时间解析函数（您应该使用大写的Y）：工作演示（我硬编码tsv数据以简化示例）： var dataAsTsv=`ano总计 2000 368 2001 365 2002 357 2003 312

想要建立一个类似于什么的趋势线

数据集中有一个不同点：在第一列，我的数据代表年份（2000），迈克的数据代表日期（2007年4月24日）

我得到的结果如下：

目标：我希望x轴显示年份

问题：出于某种奇怪的原因，它显示了一些其他数字

行动：

.index.html：

我能做些什么来解决这个问题？

只要更改时间解析函数（您应该使用大写的

）：

工作演示（我硬编码tsv数据以简化示例）：

var dataAsTsv=`ano总计
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。选择（“svg”），
边距={顶部：20，右侧：20，底部：30，左侧：50}，
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-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，宽度]）；
变量y=d3.scaleLinear（）
.rangeRound（[高度，0]）；
var line=d3.line（）
.x（函数（d）{返回x（d.ano）；}）
.y（函数（d）{返回y（d.total）；}）；
函数processData（d）{
d、 ano=解析时间（d.ano）；
d、 总计=+d.总计；
返回d；
};
var数据=d3.tsvParse（dataAsTsv，processData）；
x、 域（d3.extent（数据，函数（d）{return d.ano；}））；
y、 域（d3.extent（数据，函数（d）{返回d.total；}））；
g、 附加（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））
.select（“.domain”）
.remove（）；
g、 附加（“g”）
.呼叫（d3.左（y））
.append（“文本”）
.attr（“填充”、“千”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“0.71em”）
.attr（“文本锚定”、“结束”）
.文本（“死亡人数”）；
g、 附加（“路径”）
.基准（数据）
.attr（“填充”、“无”）
.attr（“笔划”、“钢蓝”）
.attr（“笔划线条连接”、“圆形”）
.attr（“笔划线头”、“圆形”）
.attr（“笔划宽度”，1.5）
.attr（“d”，行）


<!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>

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 parseTime = d3.timeParse("%Y");