Question

我正在尝试在条形图中添加缩放功能。我想要实现的是当用户将光标拖动到某个区域时，您应该可以放大到该区域，并且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/

任何帮助都会受到赞赏，因为我觉得我的脑袋会随时爆炸。

Answer 1

替换

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

更新了小提琴：http://jsfiddle.net/wck4ur9d/33/

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

D3在变焦时改变X轴

1 个答案: