D3在X軸上縮放

我正在嘗試將縮放功能添加到我的條形圖中。我想要實現的是，當用戶將光標拖到某個區域時，您應該可以放大該區域，並且x軸值將更改爲顯示該月的天數。正在關注this example我試圖合併相同的縮放和拖動功能。D3在X軸上縮放

但我似乎得到這個錯誤：

Error: <rect> attribute transform: Expected number, "translate(NaN,0)".

我試圖變焦功能做一次放大x軸應該顯示月變化（一月，二月，等等）到天（1月1日，1月2日，1月3日等）。任何幫助將被附上。下面是變焦功能的代碼：

function bListener() {   
    x.domain(brush.empty() ? x.domain() : brush.extent()); 

    svg.selectAll(".bar") 
     .attr("transform", function(d) { console.log(d.date); return "translate(" + x(d.date) + ",0)"; }); 

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

Here’s the complete code。

來源

2016-08-15 user3837019

您的x函數期望傳遞一個數字，以便d3可以使用它。
當前你傳遞一個字符串。 d.date在這種情況下是字符串"2013-03-21"。
您需要將其格式化爲一個數字，以便x可以爲translate函數返回一個數字。
在這種情況下使用x(new Date(d.date))

svg.selectAll(".bar").attr("transform", function(d) { 
    console.log(d.date); 
    return "translate(" + x(new Date(d.date)) + ",0)"; 
});

來源

2016-08-15 12:34:48 Craicerjack

感謝您的響應改變成date object。我改變了數據對象，但我的x軸似乎沒有更新。任何想法如何解決這個問題？ http://jsfiddle.net/noobiecode/dty0s24k/35/ – user3837019

您的xAxis函數使用月份繪製刻度 - '.orient（'bottom'） .ticks（d3.time.month） .tickFormat（d3.time.format （'％b％y'））'。簡單地稱呼它就像你一樣，不會改變蜱蟲，因爲你不會改變任何東西。你應該看看d3上的一些教程 - 開始並建立一個圖表，而不是跳入最終產品。它從長遠來看有所作爲。 – Craicerjack

我看了一下創建xAxis的位置，注意到了繪圖和格式。打算回到這裏發佈它，但你打敗了我。至於「跳入和最終產品」。我確實使用教程創建了圖表。我承認我對D3不太瞭解。 – user3837019

D3在X軸上縮放

回答

相關問題