d3.js on event + jshint 可能严格违反

Question

我有一个 on mouseover 事件处理程序绑定到条形图 rect svg 对象。

 svg.selectAll('.bar')
    .data(data)
    .enter()
    .append('rect')
    .on('mouseover', mouseover)
    .on('mouseout', mouseout)
    .attr('class', 'bar')
    .attr('x', 0)
    .attr('y', function(d) { return y(d[keyName]); })
    .attr('height', y.rangeBand())
    .attr('width', function(d) { return x(d[valueName]); })
    .attr('val', function(d) { return d[valueName]; });

我调用mouseover 函数获取用户悬停的矩形对象，并在设置填充样式的同时提取一些值。一切都按方面工作，但是当我运行 jshint 时，它会警告我在使用 this 时“可能严格违反”。关于如何让这个 lint 案例通过 D3 的任何想法？

function mouseover() {
var val = d3.select(this).attr('val');

div.transition()
    .duration(200)
    .style('opacity', 0.9);

div.html(val + ' Servers')
    .style('left', (d3.event.pageX + 20) + 'px')
    .style('top', (d3.event.pageY - 20) + 'px');

d3.select(this).style('fill', 'brown');
}

Answer 1

使用函数表达式代替声明

var mouseover = function () {
var val = d3.select(this).attr('val');

div.transition()
    .duration(200)
    .style('opacity', 0.9);

div.html(val + ' Servers')
    .style('left', (d3.event.pageX + 20) + 'px')
    .style('top', (d3.event.pageY - 20) + 'px');

d3.select(this).style('fill', 'brown');
};