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

Posted 2023-02-22

【中文标题】d3.js on event + jshint 可能严格违反

【英文标题】：d3.js on event + jshint possible strict violation

【发布时间】：2015-12-05 22:10:22

【问题描述】：

我有一个 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');

【问题讨论】：

可能是因为 JSHint 认为它是暴力的，因为 this 没有在方法中使用。请记住：JShint 是，hinting，它并不总是 100% 正确。

Why is JSHINT complaining that this is a strict violation?的可能重复

【参考方案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');
;