D3在缩放时更改X轴

我正在尝试向条形图添加缩放功能。我试图实现的是,当用户将光标拖动到某个区域上时,您应该能够放大到该区域,并且x轴值会更改为显示当月的天数。遵循此示例 http://bl.ocks.org/godds/ec089a2cf3e06a2cd5fc 。我尝试使用相同的缩放和拖动功能。

我似乎在更改x轴值时遇到了问题,因为我正在寻找一种方法,以便在选择特定区域时动态更改x轴。目前,当您放大条形图时,所有的位置都会改变,但我的x轴值保持不变(仍然显示月份数,而我想显示天数)。

我的X轴代码:

var xAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom')
    .ticks(d3.time.month)
    .tickFormat(d3.time.format('%b %y'))
    .tickSize(0)
    .tickPadding(8); 

我的画笔工具:

 function bListener(){
         x.domain(brush.empty() ? x.domain() : brush.extent());
            svg.select(".x axis").call(xAxis);

          svg.selectAll(".bar").attr("transform", function(d) { 
        console.log(d.date); 
        return "translate(" + x(new Date(d.date)) + ",0)"; 

        });
}

完整代码可在此处找到: http://jsfiddle.net/noobiecode/wck4ur9d/32/

任何帮助都将不胜感激,因为我觉得自己随时都会头晕目眩。