0

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');
}
Bobloblawlawblogs
  • 233
  • 4
  • 12
  • Probably because JShint sees it as a violent as `this` is not used within a method. Remember: JShint is, *hinting*, and it is not always 100% correct. – Terry Sep 09 '15 at 20:08
  • possible duplicate of [Why is JSHINT complaining that this is a strict violation?](http://stackoverflow.com/questions/7688765/why-is-jshint-complaining-that-this-is-a-strict-violation) – Terry Sep 09 '15 at 20:08

1 Answers1

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');
};
Vibha Singh
  • 61
  • 1
  • 4