d3 时间刻度 - 图表上的最后一个条出现在图表之外

Question

我正在 D3 版本 4 中构建一个条形图，使用时间刻度作为我的 x 轴。轴本身渲染得很好，但条形图已关闭；图表中的最后一个条形出现在轴范围之外。如何指定正确的范围和/或 x 值？

Working example

代码片段：

const xScale = (width, dates) =>
  scaleTime()
    .domain([new Date(dates[0]), new Date(last(dates))])
    .range([0, width])

svg.select('g')
  .selectAll(`.${styles['bar']}`)
  .data(series)
  .enter()
  .append('rect')
  .attr('class', styles['bar'])
  .attr('x', (d) => x(d.date))
  .attr('width', Math.floor(width / series.length))
  .attr('y', (d) => {
    const scaled = y(d.count)
      return height - scaled > 0 && height - scaled < 2
      ? height - 2
      : scaled
  })
  .attr('height', (d) => {
    const scaled = height - y(d.count)
    return scaled > 0 && scaled < 2
      ? 2
      : scaled
  })

Answer 1

问题不在于条的宽度、填充或范围……问题在于scaleTime 的概念。例如，您的第一个值是（我指的是工作示例）：

Wed Sep 21 2016

从 2017 年之前开始，但由于条形的宽度，在 2017 年之后。您的最后一个值是（再次，工作示例）：

Sat Sep 21 2030

位于域末尾 (2030) 之前，但由于条形的宽度，超出了该比例的范围。

你可以很容易地看到这是这个小提琴，我将域设置为 2032：https://jsfiddle.net/gerardofurtado/dnxc9cd9/

一个简单的解决方案：如果您想要一个以 x 刻度显示年份的条形图，请解析您的日期以获取年份并改用带刻度。

Answer 2

看起来最后一个条的左边缘出现在范围内。我想你可以通过让你的范围比宽度略宽来解决这个问题。 （说宽度 + 一个条的预期宽度。）

const barWidth = width / series.length;


const xScale = (width, dates) =>
  scaleTime()
    .domain([new Date(dates[0]), new Date(last(dates))])
    .range([0, width - barWidth])

svg.select('g')
  .selectAll(`.${styles['bar']}`)
  .data(series)
  .enter()
  .append('rect')
  .attr('class', styles['bar'])
  .attr('x', (d) => x(d.date))
  .attr('width', Math.floor(barWidth))
  .attr('y', (d) => {
    const scaled = y(d.count)
      return height - scaled > 0 && height - scaled < 2
      ? height - 2
      : scaled
  })
  .attr('height', (d) => {
    const scaled = height - y(d.count)
    return scaled > 0 && scaled < 2
      ? 2
      : scaled
  })