日期格式在X軸文本上的應用

Question

我正在嘗試將d3.time.format("%b-%Y")應用於x軸上使用的日期。

這是添加軸和標簽的代碼

var xLabels = svg
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + (margin.top + height + 12) + ")");

var formatDateOutputX = d3.time.format("%b-%Y");

xLabels.selectAll("text.xAxis")
  .data(BarData)
  .enter()
  .append("text")
  .text(function(d) {
    return d.dt;                      //<< returns dates
    //return formatDateOutputX(d.dt); //<< NOTHING RETURNED
  })
  .attr({
    'text-anchor': "middle",
    transform: function(d, i) {
      var x = (i * (width / BarData.length)) + ((width / BarData.length - barPadding) / 2);
      var y = 20;
      return 'translate(' + x + ',' + y + ')rotate(-90)';
    },
    dy: "0.35em", //dx: "-1.05em",
    'class': "xAxis"
  });

上面與該可視化的代碼285-309有關： https ://plnkr.co/edit/3d5UhM?p = preview

希望有人能提供幫助，因為這將是我將要應用的相當普遍的操作。 我究竟做錯了什么？

Answer 1

您沒有將有效日期傳遞給formatDateOutputX因此它不知道如何處理它。 您必須適當地解析值，並且可以通過多種方式來實現它。 由於d3提供了對time.format的parse方法，因此可能是最好的方法。

在您的情況下，類似這樣的方法將起作用：

    var formatDateOutputX = d3.time.format("%b-%Y");
    var readDate = d3.time.format("%d/%m/%Y").parse;

    xLabels.selectAll("text.xAxis")
      .data(BarData)
      .enter()
      .append("text")
      .text(function(d) {
        return formatDateOutputX(readDate(d.dt));
      })

檢查Plunkr 。