d3.mouse(this)抛出TypeError：t为空。

Question

我想在我的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");
});

- user3244326

Answer 1

我认为onmouse动作必须被调用到由d3选择的元素上。我无法在fiddle中真正使用你的代码，但我没有遇到鼠标错误。

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/

- robertjuh