D3在X軸上縮放

Question

我正在嘗試向條形圖添加縮放功能。 我要實現的目標是，當用戶將光標拖動到某個區域時，您應該可以放大到該區域，並且x軸值更改為顯示該月的天數。 在此示例之后，我嘗試合並相同的縮放和拖動功能。

但是我似乎收到此錯誤：

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

我嘗試使用縮放功能時，一旦在x軸上縮放，應該從顯示月份（一月，二月等）更改為幾天（一月1日，一月2日，一月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);
}       

這是完整的代碼 。

Answer 1

您的x函數希望傳遞一個數字，以便d3可以使用它。
目前，您向它傳遞了一個字符串。 在這種情況下， d.date是字符串"2013-03-21" 。
您需要將此格式設置為數字，以便x可以為translate函數返回數字。
在這種情況下，使用x(new Date(d.date))將其更改為date object

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