Javascript 如何确定d3折线图的时间刻度？

以下是我正在分析的日期：

2010-12-31
2011-12-31
2012-12-31
2013-12-31
2014-12-31
2015-12-31
2016-12-31

这是我的密码：

 this.x  = d3.scaleTime().domain(d3.extent(this.dataArray, d => {return d[ this.xType ];})).range([ this.margin.left, this.width - this.margin.right ]);
        this.y0 = d3.scaleLinear().domain([ this.getMin(this.yType1, this.yType0), this.getMax(this.yType1, this.yType0) ]).range([ this.height, 0 ]);
        this.y1 = d3.scaleLinear().domain([ this.getMin(this.yType1, this.yType0), this.getMax(this.yType1, this.yType0) ]).range([ this.height, 0 ]);

        this.xAxis      = d3.axisBottom(this.x);
        this.yAxisLeft  = d3.axisLeft(this.y0).ticks(5);
        this.yAxisRight = d3.axisRight(this.y1).ticks(5);

问题是，第一个日期（2010年）从x轴被截断，并且在最后添加了一个额外的记号，但是图表绘制正确

如果我将

.nice（this.dataArray.length）

添加到

this.x=…

，那么2010年将与2017年一起添加到最后

---

我如何解决这个问题？谢谢。

您可以

映射您的数据：

var ticks = data.map((d)=>d);

并在
值中使用此数组：

var axis = d3.axisBottom(scale)
    .tickValues(ticks);

下面是一个演示：


var宽度=500，
高度=100；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var parse=d3.timeParse（“%Y-%m-%d”）；
风险值数据=[“2010-12-31”，
"2011-12-31",
"2012-12-31",
"2013-12-31",
"2014-12-31",
"2015-12-31",
"2016-12-31"
];
forEach（（d，i，a）=>a[i]=parse（d））；
var ticks=data.map（（d）=>d）
var格式=d3.timeFormat（“%Y”）
var scale=d3.scaleTime（）
.域（d3.范围（数据，d=>d））.范围（[20，宽度-20]）；
var axis=d3.axisBottom（scale）.tickValues（ticks.tickFormat（（d）=>format（d））；
var gX=svg.append（“g”）
.attr（“变换”、“平移（0,50）”）
.呼叫（安讯士）
您可以
映射您的数据：

var ticks = data.map((d)=>d);

并在
值中使用此数组：

var axis = d3.axisBottom(scale)
    .tickValues(ticks);

下面是一个演示：


var宽度=500，
高度=100；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var parse=d3.timeParse（“%Y-%m-%d”）；
风险值数据=[“2010-12-31”，
"2011-12-31",
"2012-12-31",
"2013-12-31",
"2014-12-31",
"2015-12-31",
"2016-12-31"
];
forEach（（d，i，a）=>a[i]=parse（d））；
var ticks=data.map（（d）=>d）
var格式=d3.timeFormat（“%Y”）
var scale=d3.scaleTime（）
.域（d3.范围（数据，d=>d））.范围（[20，宽度-20]）；
var axis=d3.axisBottom（scale）.tickValues（ticks.tickFormat（（d）=>format（d））；
var gX=svg.append（“g”）
.attr（“变换”、“平移（0,50）”）
.呼叫（安讯士）