d3.mouse（this）引發TypeError：t爲null

Question

我正在嘗試將線mousehover動作添加到我的d3條形圖表中。但在代碼底部，d3.mouse（this）引發類型錯誤。

有什麼想法？

這裏是我的代碼

svg.append("rect") 
    .attr("class", "overlay") 
    .attr("width", width) 
    .attr("height", height) 
    .on("mouseover", function() { 
     focus.style("display", null); 
    }) 
    .on("mouseout", function(d) { 
     div.transition() 
      .duration(50) 
      .style("opacity", 1e-6); 
    }) 
    .on("mousemove", function(){ 
    //move focus around 
     console.log(d3.mouse(this)); 
     var x0 = x.invert(d3.mouse(this)[0]); 
     var i = bisectDate(data, x0, 1); 

     var d0 = data[i - 1]; 
     var d1 = data[i]; 
     var d = x0 - d0.date > d1.date - x0 ? d1 : d0; 
    return; 
    focus.attr("transform", "translate(" + x(d.date) + "," + y(d.accidents) + ")"); 
    div.transition() 
     .duration(50) 
     .style("opacity", .9); 
     div.html("<h4>Company Name : <strong>"+ company_name +"</strong><br/> Date : <strong>"+ formatTime(d.date) +"</strong><br/>"+ bar_text +" : <strong>" + d.deaths + "<br/></strong>"+ line_text +" : <strong>"+ d.accidents +"</strong></h4>") 
      .style("left","39%") 
      .style("top", "160px"); 
}); 

Answer 1

我覺得onmouse行動必須調用到由D3中的一種元素。我真的不能在小提琴中使用你的代碼，但我沒有得到鼠標錯誤。

var svg = d3.select('body').append('svg:svg') 
.attr('fill', 'blue'); 

svg.append("rect") 
    .attr("class", "overlay") 
    .attr("width", 333) 
    .attr("height", 333) 
    .on("mouseover", function() { 
     focus.style("display", null); 
    }) 

http://jsfiddle.net/fek9ddg5/309/