javascript - D3 scaleBand中的空占位符？

我正在制作条形图，其中x轴是日期范围。我们有四个观点：


YEAR-显示12个月的数据
MONTH-显示（28 / 9、30或31）天
在选定的月份
DAY-显示24小时
HOUR-显示60分钟


我首先开始使用scaleTime绘制x轴，但发现这些条之间的空间不一致，然后将其转换为使用scaleBand。花了一天的时间之后，我已经使所有事情变得完全统一，但是现在我遇到了一个问题，即如果为该间隔提供了值，则它仅显示日期的柱形，而对于执行该操作的间隔，它不显示空值不包含数据。

为了清楚起见，我想做的是显示一个条形图，其中包含12个月或任何间隔的位置，即使只有7月和8月包含数据。现在，如果我仅输入7月和8月的数据，它将返回带有两个条形图的图表。

即使在那个期间没有数据可以表示，也可以在x轴上添加空格吗？这是隐式的意思吗？如果是这样，似乎scaleBand不会这样做。谁能推荐一个可以实现此目标的替代比例功能？

在此先感谢您的帮助。

一些代码：

self.x = d3.scaleBand()
    .domain(self.pointsArray.map(function(d) {
        return new Date(d.start)
     }))
     .rangeRound([0, self.width], .05)
     .padding(.1)
self.g.append('g')
    .attr('class', 'axis axis--x')
    .attr('transform', 'translate(0,' + self.height + ')')
    .call(d3.axisBottom(self.x)
        .ticks(sections)
        .tickSizeOuter(0)
        .tickPadding(6)

最佳答案

因为这个原因，您没有得到想要的empry空间：

.domain(self.pointsArray.map(function(d) {
    return new Date(d.start)
 }))

如您所见，您的域仅包含数据中存在的类别变量。

一种简单的解决方案是手动将一个数组传递给域（或编写一个函数以获取所需的间隔数组）。例如，月份：

.domain(["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Out","Nov","Dec"])

这是一个演示，数据数组仅包含四个月（4月，5月，6月和11月）的信息，但所有月份都显示在轴中：

var data = [{
  month: "Apr",
  value: 10
}, {
  month: "May",
  value: 30
}, {
  month: "Jun",
  value: 40
}, {
  month: "Nov",
  value: 10
}];

var svg = d3.select("svg");
var yScale = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) {
    return d.value
  })])
  .range([120, 10]);
var xScale = d3.scaleBand()
  .domain(["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Out", "Nov", "Dec"])
  .range([40, 280])
  .padding(0.2);

var rects = svg.selectAll(null)
  .data(data)
  .enter()
  .append("rect")
  .attr("fill", "steelblue")
  .attr("x", function(d) {
    return xScale(d.month)
  })
  .attr("width", xScale.bandwidth())
  .attr("y", function(d) {
    return yScale(d.value)
  })
  .attr("height", function(d) {
    return 120 - yScale(d.value)
  });

var yAxis = d3.axisLeft(yScale);
var xAxis = d3.axisBottom(xScale);

svg.append("g").attr("transform", "translate(40,0)").call(yAxis);
svg.append("g").attr("transform", "translate(0,120)").call(xAxis);

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>