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

我看到了预期的条形图，但是将鼠标悬停在条形上并没有改变它们的外观，也没有看到光标发生变化。

标签： d3.jsbar-chartmouseover