事件+ jshint上的d3.js可能严格违反

Question

I have an on mouseover event handler bound to a bar chart rect svg objects.

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

I call the mouseover function which gets gets the rect object that the user is hovering over and pulls some values along with setting the fill style. Everything is working as aspected but when I run jshint it warns me about "Possible strict violation" on my use of this . Any idea on how to get this lint case to pass with 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

Use function expression instead of declaration like

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