線型圖懸停提示給出錯誤 - D3.js

Question

我一條線圖上工作，有取自一個特點：http://www.d3noob.org/2014/07/my-favourite-tooltip-method-for-line.html

它可以在鏈接的例子很好，但對我來說這給出了一個錯誤，沒有顯示在盤旋，即使一切運作良好：

Uncaught TypeError: Cannot read property 'data' of undefined 
    at SVGRectElement.mousemove (pen.js:366:28) 

這是代碼，目前最可能造成的麻煩：

function mousemove() { 
     var mouse_x = d3.mouse(this)[0]; // Finding mouse x position on rect 
     var graph_x = xScale.invert(mouse_x); // 

     //var mouse_y = d3.mouse(this)[1]; // Finding mouse y position on rect 
     //var graph_y = yScale.invert(mouse_y); 
     //console.log(graph_x); 

     var format = d3.time.format('%b %Y'); // Format hover date text to show three letter month and full year 

     hoverDate.text(format(graph_x)); // scale mouse position to xScale date and format it to show month and year 

     d3.select("#hover-line") // select hover-line and changing attributes to mouse position 
      .attr("x1", mouse_x) 
      .attr("x2", mouse_x) 
      .style("opacity", 1); // Making line visible 

     // Legend tooltips // http://www.d3noob.org/2014/07/my-favourite-tooltip-method-for-line.html 

    var x0 = xScale.invert(d3.mouse(this)[0]), /* d3.mouse(this)[0] returns the x position on the screen of the mouse. xScale.invert function is reversing the process that we use to map the domain (date) to range (position on screen). So it takes the position on the screen and converts it into an equivalent date! */ 
    i = bisectDate(data, x0, 1), // use our bisectDate function that we declared earlier to find the index of our data array that is close to the mouse cursor 
     /*It takes our data array and the date corresponding to the position of or mouse cursor and returns the index number of the data array which has a date that is higher than the cursor position.*/ 
    d0 = data[i - 1], 
    d1 = data[i], 
     /*d0 is the combination of date and rating that is in the data array at the index to the left of the cursor and d1 is the combination of date and close that is in the data array at the index to the right of the cursor. In other words we now have two variables that know the value and date above and below the date that corresponds to the position of the cursor.*/ 
     d = x0 - d0.data > d1.data - x0 ? d1 : d0; 
     /*The final line in this segment declares a new array d that is represents the date and close combination that is closest to the cursor. It is using the magic JavaScript short hand for an if statement that is essentially saying if the distance between the mouse cursor and the date and close combination on the left is greater than the distance between the mouse cursor and the date and close combination on the right then d is an array of the date and close on the right of the cursor (d1). Otherwise d is an array of the date and close on the left of the cursor (d0).*/ 

     //d is now the data row for the date closest to the mouse position 

     focus.select("text").text(function(columnName){ 
     //because you didn't explictly set any data on the <text> 
     //elements, each one inherits the data from the focus <g> 

     return (d[columnName]); 
     }); 
    }; 

我努力的在大約t他的問題，試圖找出是什麼原因造成的，但到目前爲止我沒有運氣。如果有人能告訴我我在做什麼錯，那麼這不是一個好例子。

完整的代碼可以在這裏找到：http://codepen.io/kvyb/pen/ZeyRam?editors=0110

Answer 1

對於bisectDate函數返回一個有意義的值，數據必須按日期排序。下面的工作筆。在循環數據並設置日期字段後，立即添加此行。

http://codepen.io/voam/pen/xdYNaM

data = data.sort(function(a,b){ return a.date - b.date}); 

Answer 2

小錯字。字段名稱是日期，而不是數據。

d = x0 - d0.data > d1.data - x0 ? d1 : d0; 

應該

d = x0 - d0.date > d1.date - x0 ? d1 : d0;