Javascript D3变焦时改变X轴

我正在尝试向条形图添加缩放功能。我试图实现的是，当用户将光标拖动到某个区域上时，您应该能够放大该区域，并且x轴值将更改为显示该月的天数。下面是这个例子。我已经尝试合并相同的缩放和拖动功能

我似乎在改变我的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)"; 

        });
}

完整代码可在此处找到：

任何帮助都将不胜感激，因为我觉得我的脑袋随时都会爆炸。

更换

svg.select(".x axis").call(xAxis);

与

 svg.select(".x.axis").call(xAxis);

此外，最好有一个轴和刷域分离在一起

var x2 = d3.time.scale().range([0, width]);

var brush = d3.svg.brush()
           .x(x2)
           .on('brush', bListener);
x2.domain(x.domain());

在您的bListener函数中

x.domain(brush.empty() ? x2.domain() : brush.extent());

更新的小提琴：

---

注意：笔刷和移动轴与缩放不同

你对条形图的放大似乎工作不正常。但要更新axis，只需在容器元素上执行.call（xAxis）即可，这将更新@thatonegay的可能副本，我正在bListener函数svg中进行更新。selectAll（“.x axis”）.call（xAxis）；你的缩放功能不太好用。它有时工作，但不是所有的时间…哪里是代码缩放我没有看到任何代码放大小提琴谢谢你。我只有最后一个问题（对不起）。目前，我只想在x轴上显示月份和年份，但放大后，我希望显示月份的日期。因此，我所做的只是创建了一个xAxis2并更改了.tickFormat（d3.time.format（“%d%b”）。这样做的问题是这些值过于聚集在一起。是否有更容易更改x轴上的值的方法。我的小提琴：如果你不确定没有

tickformat

只需提及

ticks

，例如：

.ticks（6）

，并且有像

d3.time.format（“d-%b-%y%H:%M%p”）这样的完整日期，所有内容都将自动调整。