d3 mouseover event with Angular 6

Question

Hi I have been trying to do a Bar Chart with d3.js in Angular 6.0.3. Everything seems to working fine except for the mouse(click, mouseover, mouseout) events. Below is the Screenshot of the Error Message.

I am pasting the entire code that i have used below, Can you someone point out what i have been missing:

import { Component, Input, OnInit } from '@angular/core';
import * as d3 from 'd3';   

@Component({
 selector: 'app-atom',
   templateUrl: './atom.component.html',
   styleUrls: ['./atom.component.css']
 }
)
export class AtomComponent implements OnInit {

rendered_data: any;
constructor() { 

this.rendered_data = {
  'data': [{
      'Month': '01',
      'Arts & Crafts': 78,
      'Baby & Toddler Toys': 12,
      'Characters & Brands': 70,
      'Die-Cast & Toy Vehicles': 109,
      'Hobbies': 146
  },
  {
      'Month': '02',
      'Arts & Crafts': 44,
      'Baby & Toddler Toys': 11,
      'Characters & Brands': 64,
      'Die-Cast & Toy Vehicles': 80,
      'Hobbies': 99
  },
  {
      'Month': '03',
      'Arts & Crafts': 77,
      'Baby & Toddler Toys': 3,
      'Characters & Brands': 91,
      'Die-Cast & Toy Vehicles': 118,
      'Hobbies': 117
  },
  {
      'Month': '04',
      'Arts & Crafts': 71,
      'Baby & Toddler Toys': 8,
      'Characters & Brands': 72,
      'Die-Cast & Toy Vehicles': 108,
      'Hobbies': 117
  },
  {
      'Month': '05',
      'Arts & Crafts': 76,
      'Baby & Toddler Toys': 13,
      'Characters & Brands': 85,
      'Die-Cast & Toy Vehicles': 99,
      'Hobbies': 121
  },
  {
      'Month': '06',
      'Arts & Crafts': 57,
      'Baby & Toddler Toys': 11,
      'Characters & Brands': 77,
      'Die-Cast & Toy Vehicles': 102,
      'Hobbies': 131
  },
  {
      'Month': '07',
      'Arts & Crafts': 66,
      'Baby & Toddler Toys': 6,
      'Characters & Brands': 100,
      'Die-Cast & Toy Vehicles': 116,
      'Hobbies': 125
  },
  {
      'Month': '08',
      'Arts & Crafts': 59,
      'Baby & Toddler Toys': 6,
      'Characters & Brands': 86,
      'Die-Cast & Toy Vehicles': 99,
      'Hobbies': 99
  },
  {
      'Month': '09',
      'Arts & Crafts': 72,
      'Baby & Toddler Toys': 7,
      'Characters & Brands': 74,
      'Die-Cast & Toy Vehicles': 98,
      'Hobbies': 129
  },
  {
      'Month': '10',
      'Arts & Crafts': 62,
      'Baby & Toddler Toys': 10,
      'Characters & Brands': 84,
      'Die-Cast & Toy Vehicles': 105,
      'Hobbies': 123
  },
  {
      'Month': '11',
      'Arts & Crafts': 78,
      'Baby & Toddler Toys': 11,
      'Characters & Brands': 66,
      'Die-Cast & Toy Vehicles': 99,
      'Hobbies': 129
  },
  {
      'Month': '12',
      'Arts & Crafts': 62,
      'Baby & Toddler Toys': 8,
      'Characters & Brands': 91,
      'Die-Cast & Toy Vehicles': 88,
      'Hobbies': 128
  }]};

 ngOnInit() {
     this.generateHistoricBarChart();
 }
 generateHistoricBarChart() {
    let prev = '';
    let margin = {top: 5, right: 20, bottom: 30, left: 40};
    let width = 600 - margin.left - margin.right;
    let height = 420 - margin.top - margin.bottom;
    let svg = d3.select('#chart').classed("svg-container", true).append('svg')
     .attr("preserveAspectRatio", "xMinYMin meet")
     .attr("viewBox", "0 0 600 420")
     .classed("svg-content-responsive", true)
     .style('background', '#eee');

let chart = svg.append('g')
  .attr('class', 'bar')
  .attr('transform', `translate(${margin.left}, ${margin.top})`);

let tooltip = d3.select('body').append('div').attr('class', 'toolTip');
let xDomain = this.rendered_data.data.map(d => d.Month);
let yDomain: any = [0, d3.max(this.rendered_data.data, d => d['Arts & Crafts']*1.1)];

let x = d3.scaleBand()
        .domain(xDomain)
        .rangeRound([0, width])
        .padding(0.2);

const y = d3.scaleLinear()
        .domain(yDomain)
        .range([height, 0]);

// add the x Axis
svg.append('g')
        .attr('class', 'x axis')
        .attr('transform', `translate(${margin.left}, ${margin.top + height})`)
        .call(d3.axisBottom(x));

// add the y Axis
svg.append('g')
        .attr('class', 'y axis')
        .attr('transform', `translate(${margin.left}, ${margin.top})`)
        .call(d3.axisLeft(y));

// plot chart with data
svg.selectAll('bar')
    .data(this.rendered_data.data)
    .enter().append('rect')
    .attr('class', 'bar')
    .attr('x', function(d) { 
        return margin.left + x(d['Month']); 
    })
    .attr('y', function (d, i) { 
        return height; 
    })
    .attr('width', x.bandwidth)
    .attr('fill', '#5799C7')
    .attr('height', 0)
    .transition().duration(200).delay(function (d, i) { 
        return i * 50; 
    })
    .attr('height', function(d) { 
        return height - y(d['Arts & Crafts']); 
    })
    .attr('y', function(d) { 
        return y(d['Arts & Crafts']); 
    })
    .on('mouseover', 
     function(d){
         tooltip
             .style('left', d3.event.pageX - 50 + 'px')
             .style('top', d3.event.pageY - 70 + 'px')
             .style('background', '#333') 
             .style('display', 'inline-block')  
             .html(`${d['Month']} <br /> ${d['Arts & Crafts']}`)
     }
    );
 }
 }

Any help would be appreciable. Let me know if i haven't provided clear explanations.

Answer 1

This should work to trigger the mouseover event. And add your css to the post.

d3.select('svg') .on('mouseover', function(d){
       console.log(d)
       console.log(d3.mouse(this))
         tooltip
             .style('left', d3.mouse(this)[0] - 50 + 'px')
             .style('top', d3.mouse(this)[1] - 70 + 'px')
             .style('background', '#333') 
             .style('display', 'inline-block')  
             .html(`${d['Month']} <br /> ${d['Arts & Crafts']}`)
     }