D3在X轴上缩放

Question

我正在尝试将缩放功能添加到我的条形图中。我想要实现的是，当用户将光标拖到某个区域时，您应该可以放大该区域，并且x轴值将更改为显示该月的天数。 正在关注this example我试图合并相同的缩放和拖动功能。

但我似乎得到这个错误：

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。

Answer 1

您的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)"; 
});