javascript - D3.js 刻度格式 : show when month changes

Question

我正在使用 D3 (v4) 显示 x 轴上带有日期的条形图。

我正在尝试让刻度显示月份中的第几天，除非它是我希望它显示月份的第一个位置，即指示月份何时更改。我什至不知道从哪里开始。

当前的格式是这样的:

但我希望它看起来更像这样:

目前生成坐标轴的代码如下:

let timeFormat = "%b %d"
xAxis = g => g
      .attr("transform", `translate(0, ${height - margin.bottom})`)
      .call(d3.axisBottom(x).tickFormat(d3.timeFormat(timeFormat)))

我基本上需要一些类似

的东西

let timeFormat = "%d == 0" ? "%b" :  "%d"

我知道在这种情况下这是无意义的 JS，但它说明了我正在寻找的逻辑

这是我图表的简化版本的片段:

let keys = [];

var w = 400;
var h = 200;

var margin = {
  top: 30,
  bottom: 40,
  left: 50,
  right: 20,
}

var width = w - margin.left - margin.right
var height = h - margin.top - margin.bottom


var data = [
   {
      "count":100,
      "date":"2018-11-30T00:00:00"
   },
   {

      "count":50,
      "date":"2018-12-01T00:00:00"
   },
   {

      "count":75,
      "date":"2018-12-02T00:00:00"
   },
]


var x = d3.scaleTime()
  .domain(d3.extent(data, function(d) { return new Date(d.date) }))
  .range([0, width]);

var y = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.count)])
  .range([height, 0]);

var svg = d3.select('body').append('svg')
  .attr('class', 'chart')
  .attr('width', w)
  .attr('height', h);

var chart = svg.append('g')
  .classed('graph', true)
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
 
let timeFormat = "%b %d"
  
chart.append('g')
  .classed('x axis', true)
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x)
    .tickFormat(d3.timeFormat(timeFormat))
    .ticks(2)
  )

chart.append('g')
  .classed('y axis', true)
  .call(d3.axisLeft(y))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.0.0/d3.min.js"></script>

Answer 1

您可以从 scale 获取 ticks 并使用它来查看上一个 ticks 是否是另一个月，并根据它选择您的格式:

const longFormat = d3.timeFormat('%b');
const shortFormat = d3.timeFormat('%d');
const axis = d3.axisBottom(x);
axis.tickFormat((d, i) => {
    const ticks = axis.scale().ticks();

    if (i > 0 && ticks[i - 1].getMonth() === d.getMonth()) {
        return shortFormat(d);
    }
    else {
        return longFormat(d);
    }
});

xAxis = g => g
    .attr("transform", `translate(0, ${height - margin.bottom})`)
    .call(axis)

编辑:如果您不使用时间标度而是使用 scaleBand，您应该能够使用域来计算格式:

const ticks = axis.scale().domain();