javascript - 事件 + jshint 上的 d3.js 可能存在严格违规

Question

我有一个绑定(bind)到条形图矩形 svg 对象的 on mouseover 事件处理程序。

 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');
};