日期格式在x轴文本上的应用

Application of date formatting on x-axis text

本文关键字：应用 文本 格式 日期      更新时间：2023-09-26

我试图将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

希望有人能帮助，因为这将是一个相当常见的操作，我将想要应用。我做错了什么?

您没有将有效日期传递给formatDateOutputX，因此它不知道如何处理它。你必须适当地解析这个值，你可以用很多方法来做。因为d3提供了parse方法到time.format，这可能是最好的方法。

在你的情况下，像这样的东西将工作:

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

检查普朗克

相关文章：