D3.js:计算时间尺度的条形宽度,改变范围？

Question

我正在构建一个带有x轴时间刻度的D3条形图.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 .