D3 - 堆积条形图，在工具提示中显示所有值

Question

我在这里有一个堆栈闪电战 - https://stackblitz.com/edit/bar-tooltip?embed=1&file=src/app/bar-chart.ts&hideNavigation=1

当您将鼠标悬停在条上时，工具提示会显示堆叠条的该部分的值。

是否可以将鼠标悬停在栏上的任意位置并在工具提示中显示所有 3 个值。

Answer 1

这是一种方法：

在鼠标悬停函数中，使用绑定数据的data属性获取所有键值。

.on("mousemove", (d:any)=>{
    var html = '';
    that.keys.forEach(function (k) {
      html += k + ': ' + d.data[k] + '<br/>';
    });
    d3.select('.chart-tooltip')
        .html(html.trim())
}); 

为了使上述工作正常进行，我将键分配给这样的变量：

private keys = ['one', 'two', 'three'];

还稍微调整了 CSS：

.chart-tooltip{
  background: red;
  color: white;
  width: 80px;
  height: auto;
}

这是您的代码的一个分支，其中包含上述更改：

https://stackblitz.com/edit/bar-tooltip-zcqvvt?file=src/app/bar-chart.ts

希望这会有所帮助。