我正在构建一个 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/
最佳答案
没有函数获取宽度,但你可以很容易地计算它:
.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 .
关于javascript - D3.js:计算随范围变化的时间尺度中的条形宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18835053/