D3 X 축 확대/축소

Question

막대 막 대형 차트에 확대/축소 기능을 추가하려고합니다. 내가 달성하고자하는 것은 사용자가 특정 영역 위로 커서를 드래그하면 해당 영역을 확대 할 수 있어야하고 x 축 값이 해당 달의 일 수를 표시하도록 변경되어야합니다. 다음 this example 동일한 확대/축소 기능을 통합하려고했습니다. (월, 2 월 등)

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

내가 줌 기능을 할 노력하고있어하는 것은 한 번 보여주는 개월에서 변경해야합니다 x 축 확대된다

하지만 보이는이 오류가 발생합니다 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)"; 
});