javascript - 在 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 .