javascript - D3.js:计算随范围变化的时间尺度中的条形宽度？

Question

我正在构建一个 D3 条形图，其 x 轴上有一个时间刻度。 x 轴的范围可以变化。

如何指定条形图上条形的正确宽度？我见过人们使用 rangeBands 来表示序数尺度，但我不确定如何使用时间尺度来做到这一点。

这是我的代码:

var x = d3.time.scale().range([0, width]);
var xAxis = d3.svg.axis().scale(x).orient("bottom");
[...]

// After new data has been fetched, update the domain of x...
x.domain(d3.extent(data, function(d) { return d.date; }));
d3.select(".x.axis").call(xAxis);

// ... and draw bars for chart
var bars = svg.selectAll(".air_used")
    .data(data, function(d) { return d.date; });

bars.attr("y", function(d) { return y(d.air_used); })
.attr("height", function(d) { return height - y(d.air_used); })
.attr("x", function(d) { return x(d.date); })
.attr("width", 20) // ??

我应该在最后一行放什么来代替 20？

更新:JSFiddle在这里:http://jsfiddle.net/aWJtJ/2/

Answer 1

没有函数获取宽度，但你可以很容易地计算它:

.attr("width", width/data.length);

如果您不希望条形接触，您可能需要从中减去一小部分。您还需要相应地调整 x 位置，例如

.attr("x", function(d) { return x(d.date) - (width/data.length)/2; })
.attr("width", width/data.length);

为了使刻度正确对齐，您还需要调整 x 轴刻度的范围，因为第一个刻度将放置在第一个值处:

var x = d3.time.scale().range([width/data.length/2, width-width/data.length/2]);

完整的jsfiddle here .