javascript - D3 X轴缩放

Question

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

但我似乎收到此错误:

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

我尝试使用缩放功能执行的操作是，一旦在 x Axis 上缩放，应该从显示月份(1 月、2 月等)更改为显示天(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)) 将其更改为 date 对象

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