d3.js。on mouseover不会触发

Question

我是d3的新手，并且有一小段代码可以部分正常工作。 只有最后一行给我带来麻烦。 该代码来自Codecademy的一门课程。 代码不起作用：

LET CLIMATE_DALY_DATA = [
    {REGION: "LOW-AND-MIDDLE-INCOME COUNTRIES OF THE AFRICAN REGION", DEATHS: 57},
    {REGION: "LOW-AND-MIDDLE-INCOME COUNTRIES OF THE AMERICAS", DEATHS: 2},
    {REGION: "LOW-AND-MIDDLE-INCOME COUNTRIES OF THE EASTERN MEDITERRANEAN REGION", DEATHS: 20},
    {REGION: "LOW-AND-MIDDLE-INCOME COUNTRIES OF THE EUROPEAN REGION", DEATHS: 0.67},
    {REGION: "LOW-AND-MIDDLE-INCOME COUNTRIES OF THE SOUTH-EAST ASIA REGION", DEATHS: 58},
    {REGION: "LOW-AND-MIDDLE-INCOME COUNTRIES OF THE WESTERN PACIFIC REGION", DEATHS: 4},
    {REGION: "HIGH INCOME COUNTRIES", DEATHS: 0.23}
];


LET TOGGLECLASS = (I,TOGGLE) => {
    D3.SELECT("#VIZ DIV:NTH-CHILD("+ I +")").CLASSED("HIGHLIGHTBAR",TOGGLE);
    D3.SELECT("#LEGEND LI:NTH-CHILD("+ I +")").CLASSED("HIGHLIGHTTEXT",TOGGLE);
};

LET DIVSELECTION =
    D3.SELECT('#VIZ')
    .SELECTALL('DIV')
    .DATA(CLIMATE_DALY_DATA)
    .ENTER()
    .APPEND('DIV')
    .ON('MOUSEOVER', (D,I) => {TOGGLECLASS(D.I+1, TRUE)})
    .ATTR('CLASS', 'BAR')
    .STYLE('WIDTH', FUNCTION(D) {RETURN D.DEATHS*8 + 'PX';})
;

LET LISTSELECTION =
    D3.SELECT('#LEGEND')
    .SELECTALL('LI')
    .DATA(CLIMATE_DALY_DATA)
    .ENTER()
    .APPEND('LI')
    .TEXT(FUNCTION(D) {RETURN D.REGION + ': ' + D.DEATHS + ' DEATHS';})
;

我看到的条形图符合预期，但是将鼠标悬停在条形上并不会改变其外观，也不会看到光标的变化。