D3 X軸をズームする

Question

私は棒グラフにズーム機能を追加しようとしています。私が達成しようとしているのは、ユーザーがカーソルを特定の領域にドラッグすると、その領域を拡大でき、x軸の値がその月の日数を示すように変わることです。 投稿：this example私は同じズームとドラッグ機能を組み込もうとしました。

しかし、私はこのエラーを取得しているようだ：ヶ月を示すから変更する必要があり

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

は、私はズーム機能を使ってやろうとしているが、一度x軸にズームインする（月、2月、など） 1月1日、2月1日、3月1日など）。 すべてのヘルプが有効になります。

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