如何指定日期格式d3.js为x轴

Question

的数据是这样的，在暂且：

this.Data = { 
    Title: "Chart Title", 
    XAxisTitle: "", 
    YAxisTitle: "", 
    Series: [{ 
     Title: "Series A", 
     Data: [{ X: new Date(2017, 5, 31), Y: 43 }, { X: new Date(2017, 5, 30), Y: 32 }, { X: new Date(2017, 5, 29), Y: 78 }, { X: new Date(2017, 5, 28), Y: 15 }, { X: new Date(2017, 5, 27), Y: 12 }] 
     }, 
     { 
      Title: "Series B", 
      Data: [{ X: new Date(2017, 5, 31), Y: 13 }, { X: new Date(2017, 5, 30), Y: 72 }, { X: new Date(2017, 5, 29), Y: 33 }, { X: new Date(2017, 5, 28), Y: 45 }, { X: new Date(2017, 5, 27), Y: 22 } 
     ] 
    }] 
}; 

这是行不通的。如果我离开.tickFormat，我只会显示原始刻度。但通过它似乎有意义的崩溃的方式。

private drawXAxis(): void { 
    this.xAxis = d3.svg.axis().scale(this.xScale) 
     .tickFormat(d3.time.format("%Y-%m-%d")) 
     .tickPadding(15); 
    this.svg.append('g') 
     .attr('class', 'x axis') 
     .attr('transform', 'translate(0,' + this.height + ')') 
     .call(this.xAxis); 
} 

它可能必须作为帮助函数传递，但我在任何地方都找不到任何示例来执行此操作。

Answer 1

使用此功能可以遍历数据并将日期更改为所需的格式。

var parseDate = d3.time.format("%Y-%m-%d") 

function formatDate(data){ 
    data.forEach(function (loop1) { 
    loop1.Series.forEach(function (loop2) { 
     loop2.Data.forEach(function (d) { 
      d.X = parseDate(d.X); 
     }); 
    }); 
    }); 
}