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);
        });
     });
  });
}

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

1 个答案: