D3-一些栏上的工具提示

Question

我这里有一个矮人-https://plnkr.co/edit/qDi8bm3xh3hdaV059AXX?p=preview 我有一个条形图，条形图相互重叠。

当我仅将鼠标悬停在红色条上时，我想显示一个工具提示。

我有这个工作，但只在第一个酒吧工作。

为什么工具提示不能在所有具有相同类名的红色条上起作用。

d3.select('.bar-1').on("mouseover", ()=>{
        d3.select('.chart-tooltip').style("display", null)
    })
    .on("mouseout", ()=>{
        d3.select('.chart-tooltip').style("display", "none")
            .transition()
            .duration(500)
    })
    .on("mousemove", (d)=>{
        let html = 'Tooltip';

        d3.select('.chart-tooltip')
        .style("left", d3.event.pageX + 15 + "px")
        .style("top", d3.event.pageY - 25 + "px")
            .html(html.trim())
    });}