javascript - D3.js:时间尺度上均匀分布的条形

Question

我正在尝试创建一个简单的条形图，在 x 轴的时间刻度上具有均匀间隔的条形图，但即使给出了 here 的解决方案，也没有成功。

我的条形重叠并且条形间隔不均匀。我的部分代码如下:

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

bars.transition().duration(1000)
    .attr("x", function(d) { return x(d.date) - Math.floor(width/data.length/2); })
    .attr("width", Math.floor(width / data.length))
    .attr("y", function(d) { return y(d.c); })
    .attr("height", function(d) { return height - y(d.c);});

bars.enter().append("rect")
    .attr("class", "air_used")
    .attr("width", Math.floor(width / data.length))
    .attr("x", function(d) { return x(d.date) - Math.floor((width/data.length)/2); })
    .attr("y", height)
    .attr("height", 0)
    .transition().duration(1000)
    .attr("y", function(d) { return y(d.c); })
    .attr("height", function(d) { return height - y(d.c);});

JSFiddle在这里:http://jsfiddle.net/vivekratnavel/v7rx8ku9/2/

感谢任何帮助。谢谢!

Answer 1

在 x 轴上缩放时间之前将小时设置为 0 小时:0 分钟:0 秒。

http://jsfiddle.net/hnj30m4j/

bars.transition().duration(1000)
.attr("x", function(d) { return x(d.date.setHours(0,0,0))  - Math.floor(width/data.length/2); })
.attr("width", Math.floor(width / data.length))
.attr("y", function(d) { return y(d.c); })
.attr("height", function(d) { return height - y(d.c);});

bars.enter().append("rect")
.attr("class", "air_used")
.attr("width", Math.floor(width / data.length))
.attr("x", function(d) { return x(d.date.setHours(0,0,0)) - Math.floor((width/data.length)/2); })
.attr("y", height)
.attr("height", 0)
.transition().duration(1000)
.attr("y", function(d) { return y(d.c); })
.attr("height", function(d) { return height - y(d.c);});