D3在变焦时更改X轴

我正在尝试将缩放功能添加到我的条形图中。我想要实现的是，当用户将光标拖到某个区域时，您应该可以放大该区域，并且x轴值将更改为显示该月的天数。以下示例为http://bl.ocks.org/godds/ec089a2cf3e06a2cd5fc。我试图合并相同的缩放和拖动功能。D3在变焦时更改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)"; 

     }); 
}

完整代码可以在这里找到：因为我觉得我的头去http://jsfiddle.net/noobiecode/wck4ur9d/32/

任何帮助，将不胜感激随时爆炸。

来源

2016-08-18 user3837019

你放大到条形图似乎没有正常工作。但要更新轴只是在容器元素上执行.call（xAxis），并且将更新 – thatOneGuy

[如何使用d3.js更新坐标轴]（http://stackoverflow.com/questions/16919280/how-to -update-axis-using-d3-js） – thatOneGuy

@thatOneGuy，我在bListener函数svg.selectAll（“.x axis”）内进行更新，call（xAxis）; – user3837019

更换

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

与

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

而且最好是有对刷轴和域名加入BLISTENER功能一起分离

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

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

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

更新拨弄：http://jsfiddle.net/wck4ur9d/33/

注：刷和移动轴是不相同的变焦。

来源

2016-08-18 10:43:23 SiddP

谢谢你。我只有最后一个问题（抱歉）。目前我只想在x轴上显示月份和年份，但放大时我希望显示月份的日期。所以我所做的只是创建了一个xAxis2并且改变了.tickFormat（d3.time.format（'％d％b'））。问题在于这些值太聚集在一起。有没有更容易更改X轴上的值。我的小提琴：http：// jsfiddle。net/noobiecode/wck4ur9d/42/ – user3837019

如果你不确定没有'tickformat'只是提到'ticks'例如：'.ticks（6）'并且有完整的日期类似'd3.time.format（“％d- ％b-％y％H：％M％p“）'，一切都会自动调整。 – SiddP

D3在变焦时更改X轴

回答

相关问题