D3.js：时间尺度上的均匀间隔条答案

【问题标题】：D3.js: Uniformly spaced bars on time scaleD3.js：时间尺度上的均匀间隔条
【发布时间】：2015-10-25 05:52:35
【问题描述】：

我正在尝试创建一个简单的条形图，它在 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/

感谢任何帮助。谢谢！

【问题讨论】：

如果您的日期/时间在条形宽度内重叠，唯一的解决方案是改变每个条形的宽度或使其对所有这些条形宽度都足够小以至于没有重叠......那是什么你在追求吗？
@Mark 我不知道我是否完全理解了你的问题，但我正在寻找的是与交叉过滤器（square.github.io/crossfilter）中发现的相似的等距条形

标签： javascript d3.js

【解决方案1】：

在 x 轴上缩放时间之前将小时设置为 0hrs:0min:0sec。

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);});

【讨论】：