Accepted answer

Here's one approach to do that:

In the mouseover function, use the bound data's data attribute to fetch all the key values.

.on("mousemove", (d:any)=>{
    var html = '';
    that.keys.forEach(function (k) {
      html += k + ': ' +[k] + '<br/>';

And for the above to work, I assigned the keys to a variable like this:

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

Also tweaked the CSS a bit:

  background: red;
  color: white;
  width: 80px;
  height: auto;

And here's a fork of your code with the above changes:

Hope this helps.

Related Query