javascript - D3 在缩放时更改 X Axis

Question

我正在尝试向我的条形图添加缩放功能。我想要实现的是，当用户将光标拖动到某个区域时，您应该能够放大该区域，并且 x Axis 值更改为显示该月的天数。按照这个例子http://bl.ocks.org/godds/ec089a2cf3e06a2cd5fc 。我尝试合并相同的缩放和拖动功能。

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

我的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/

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

Answer 1

替换

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

与

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

此外，最好将画笔的 Axis 和域分开

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

更新了 fiddle :http://jsfiddle.net/wck4ur9d/33/

注意:画笔和移动 Axis 与缩放不同。