如何在带有scaleTime的条形图中使用x和width？

Question

我在这里有一个Codepen- https ://codepen.io/anon/pen/xpaYYw ? editors = 0010

它是一个简单的测试图，但日期将采用这种格式。

我在x轴上有日期，在y上有金额

如何使用x比例尺设置条的宽度和x位置。

    layers.selectAll('rect')
      .data(data)
      .enter()
      .append('rect')

      .attr('height', function(d, i) {
        return height - y(d.one);
      })

      .attr('y', function(d, i) {
        return y(d.one);
      })

      .attr('width', function(d, i) {
        return 50;
      })

      .attr('x', function(d, i) {
        return 80*i;
      })

      .style('fill', (d, i) => {
        return colors[i];
      });

Answer 1

您问题的问题与编程，JavaScript或D3无关...问题是基本的dataviz概念（这就是为什么我在您的问题中添加了数据可视化标签的原因）：

您尝试做的是不正确的！你应该不会有时间刻度使用吧。时间刻度用于时间序列（其中我们使用点或通过线连接的点）。

如果您在x轴上使用带有时间的条形，则会遇到问题：

1. 放置条形图：条形图的左边缘将始终位于您设置的日期。整个日期将在该日期之后。
2. 设置条的宽度：在实际的条形图中（对于x轴使用分类变量），宽度没有意义。但是在时间尺度上，宽度代表时间。

但是，仅出于解释的目的，让我们创建一个带有时间刻度的条形图（尽管这是一个错误的选择）……这是如何做到的：

首先，及时设置条的“宽度” 。假设每个小节的宽度为10天：

.attr("width", function(d){
    return x(d3.timeDay.offset(d.date, 10)) - x(d.date)
})

然后，将x条形图的位置设置为当前日期，减去其宽度的一半（在我们的示例中，即少于5天）：

.attr('x', function(d, i) {
    return x(d3.timeDay.offset(d.date, -5));
})

最后，不要忘了在时间范围内创建“填充”：

var x = d3.scaleTime()
  .domain([d3.min(data, function(d) {
    return d3.timeDay.offset(d.date, -10);
  }), d3.max(data, function(d) {
    return d3.timeDay.offset(d.date, 10);
  })])
  .range([0, width]);

这是您所做的更改的代码：

.attr("width", function(d){
    return x(d3.timeDay.offset(d.date, 10)) - x(d.date)
})

.attr('x', function(d, i) {
    return x(d3.timeDay.offset(d.date, -5));
})