D3 v4 日期标签返回错误格式

Question

我正在使用react v16和D3绘制一个简单的图形，但是x轴返回的格式错误，如下图所示；

格式应该是%Y-%m-%d，它甚至混合了小时。

下面是我如何转换数据，很简单没有什么复杂的；

const parseDate = d3.timeParse("%Y-%m-%d");
let max = 0, min = 0;

let timeData = recommended_time_historical.map((v,i) => {

  max = Math.max(v.score, max);
  min = Math.min(v.score, min);

  return {
    date: parseDate(v.label),
    score: v.score
  };

})

下面是D3代码；

// omitted for brevity 

// set the ranges
const x = d3.scaleTime().rangeRound([0, width]);
const y = d3.scaleLinear().rangeRound([height, 0]);

x.domain(d3.extent(data, (d)=> {
  return d.date;
}));
y.domain([min,max]);

let area = d3.area()...
// omitted for brevity

// add the X gridlines
chart.append("g")
  .attr("class", "grid")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x)
    .tickFormat(d3.timeParse("%Y-%m-%d"))
  )

// add the Y gridlines
chart.append("g")
  .attr("class", "grid")
  .call(d3.axisLeft(y)
    .ticks(10)
    .tickSize(-width)
    .tickFormat("")
  )


// add the area
chart.selectAll()
  .data([data]).enter()
  .append('path')
  .attr("class", "area")
  .attr("d", area)    

// omitted for brevity

chart.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x));

chart.append("g")
  .call(d3.axisLeft(y));

Answer 1

您不能在 d3 axisBottom 中再次解析时间，但必须定义时间格式，通过该格式您可以看到轴中的刻度标签。所以用 d3 axisBottom 中的 timeFormat 替换 timeParse。

// X GridLines
chart.append("g")
    .attr("class", "grid")
    .attr("transform", "translate(0," + height + ")")
    .call(
        d3.axisBottom(x)
            .tickFormat(function (data) {
                return d3.timeFormat("%Y-%m-%d")(data);
            });
    );