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軸

回答

相關問題