我在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
  })

javascript - d3时间刻度-图形的最后一个条形出现在图形外部-LMLPHP

最佳答案

问题不在于条的宽度,填充物或范围...问题不在于scaleTime的概念。例如,您的第一个值是(我指的是工作示例):

Wed Sep 21 2016

该值在2017年之前开始,但是由于条形的宽度,在2017年之后。您的最后一个值是(同样是工作示例):
Sat Sep 21 2030

它位于域的末端(2030)之前,但是由于条形图的宽度在该比例尺的范围之后。

您可以轻松地看到这是小提琴,我将域设置为2032:https://jsfiddle.net/gerardofurtado/dnxc9cd9/

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

08-05 21:36
查看更多