如何在我的D3折线图上使用鼠标标记？

Question

我正在尝试关注D3折线图的this example。但是在制作折线图时我收到NaN消息。

这是我的代码（full code here）

    var focus = svg.append('g')
        .attr('class','focus')
        .style('display','none');

    focus.append('circle')
        .attr('r',4.5)
        .attr('fill','none')
        .attr('stroke','steelblue');

    focus.append('text')
        .attr('x',9)
        .attr('dy','.35em');

    svg.append('rect')
        .attr('class','overlay')
        .attr('fill','none')
        .attr('pointer-events','all')
        .attr('width',width)
        .attr('height',height)
        .on('mouseover',function(){
            focus.style('display',null);
        })
        .on('mouseout',function(){
            focus.style('display','none');
        })
        .on('mouseout',function(){
            console.log(x.invert(d3.mouse(this)[0]));
            var x0 = x.invert(d3.mouse(this)[0]),
            i = bisectDate(data, x0, 1),
            d0 = data[i-1],
            d1 = data[i],
            d = (x0-d0.date) > (d1.date-d0) ? d1 : d0;
            focus.attr('transform','translate('+x(d.date)+','+y(d.close)+')');
            focus.select('text').text(d.values);
        });
});

当我运行代码并将鼠标移到一行时，我在控制台中收到此消息

Unexpected value translate(NaN,NaN) parsing transform attribute.
this.setAttribute(name, value);

我该如何解决这个问题？