D3 Масштабирование по оси X

Question

Я пытаюсь добавить функцию масштабирования в свою гистограмму. То, что я пытаюсь достичь, - это когда пользователь перетаскивает курсор над определенной областью, вы можете увеличить масштаб до этой области и изменить значение оси x, показывая количество дней в этом месяце. this example Я попытался включить те же функции масштабирования и перетаскивания.

Но я, кажется, получаю эту ошибку:

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

То, что я пытаюсь сделать с помощью функции масштабирования однократно наведена на оси х должна меняться с указанием месяца (январь, февраль и т.д.) до дней (1 января, 2 января, 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.
В этом случае изменить его в date object с помощью x(new Date(d.date))

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