Adding a tooltip to d3 angular component

bar-chart-tooltip.component.ts

private tooltip: any;  private total: number;

constructor(private service: DataService) {
  // ...
  this.total = this.dataSource.reduce((sum, it) => sum += it.abs, 0);
}

ngOnInit() {
  // ...
  this.tooltip = d3.select('#pie') // or d3.select('#bar')
    .append('div').attr('class', 'tooltip').style('display', 'none').style('opacity', 0);
}

private drawBars() {
  // ...
  this.bars
  // ...
    .on('mousemove', function (s) {
      const percent = (Math.abs(s.abs / this.total) * 100).toFixed(2) + '%';
      this.tooltip.style('top', (d3.event.layerY + 15) + 'px').style('left', (d3.event.layerX) + 'px')
        .style('display', 'block').style('opacity', 1).style('height', '40px')
        .html(`name: ${s.name}<br>value: ${s.value}<br>share: ${percent}`);
    }.bind(this))
    .on('mouseout', function () {
      this.tooltip.style('display', 'none').style('opacity', 0);
    }.bind(this));
}

pie-chart-tooltip.component.ts

private tooltip: any;  private total: number;

constructor(private service: DataService) {
  // ...
  this.total = this.dataSource.reduce((sum, it) => sum += it.abs, 0);
}

ngOnInit() {
  // ...
  this.tooltip = d3.select('#pie') // or d3.select('#bar')
    .append('div').attr('class', 'tooltip').style('display', 'none').style('opacity', 0);
}

private drawSlices() {
  // ...
  this.slices
    .attr('fill', (d, i) => this.color(i))
    .on('mousemove', function (s) {
      const percent = (Math.abs(s.data.abs / this.total) * 100).toFixed(2) + '%';
      this.tooltip .style('top', (d3.event.layerY + 15) + 'px').style('left', (d3.event.layerX) + 'px')
        .style('display', 'block').style('opacity', 1).style('height', '40px')
        this.tooltip.html(`name: ${s.data.name}<br>value: ${s.data.value}<br>share: ${percent}`);
    }.bind(this))
    .on('mouseout', function () {
      this.tooltip.style('display', 'none').style('opacity', 0);
    }.bind(this));
  }