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