scaleBand中的D3空占位符？答案

【问题标题】：D3 empty placeholders in scaleBand?scaleBand中的D3空占位符？
【发布时间】：2017-08-23 21:20:55
【问题描述】：

我正在制作一个条形图，其中 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)

【问题讨论】：

你真的应该使用 scaleTime。看来你放弃得太快了。 “即使没有数据可以代表那个时期，是否可以在 x 轴上添加空格？”这正是线性刻度（例如 scaleTime）可以为您做的事情。
您使用什么方法使它们均匀分布？我在网上看到的是，月份大小之间的差异会导致条形之间的差距不均匀，这就是发生在我身上的事情。 scaleBand 函数是一个完美的解决方案。
@Kraken 您在这里使用波段比例而不是时间比例是正确的：在这种情况下，您的日期是分类变量。解决方法很简单：手动传递域而不是映射数据数组。
@GerardoFurtado 这是否意味着我必须为空值手动构建数据对象并将它们插入到我的数据数组中？
@GerardoFurtado 我试过 .domain([self.pointsArray[0], self.pointsArray[self.pointsArray.length - 1]])，但现在条形图彼此重叠。如果您让我知道您需要查看什么，我可以添加更多代码。

标签： javascript d3.js

【解决方案1】：

因为这个，你没有得到你想要的空位：

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

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

简单的解决方案是将数组手动传递（或编写函数以获取所需的区间数组）到域。比如月份：

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

这是一个演示，数据数组只有四个月（Apr、May、Jun 和 Nov）的信息，但所有月份都显示在轴上：

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>

【讨论】：