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轴上缩放

回答

相关问题