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

希望这会有所帮助。