path hover not rendering in svg when using Angular

Question

Path hovering under SVG works when using plain JS + HTML. However when importing the same function over to Angular it stops working.

circularHeatChart.js

function loadCircularHeatMap (dataset, dom_element_to_append_to,radial_labels,segment_labels) {

  var margin = {top: 50, right: 50, bottom: 50, left: 50};
  var width = 600 - margin.left - margin.right;

  var height = width;
  var innerRadius = width/14;
  var segmentHeight = (width - margin.top - margin.bottom - 2*innerRadius )/(2*radial_labels.length)

  var chart = circularHeatChart()
  .innerRadius(innerRadius)
  .segmentHeight(segmentHeight)
  .range(["white", "#01579b"])
  .radialLabels(radial_labels)
  .segmentLabels(segment_labels);

  chart.accessor(function(d) {return d.value;})

  var svg = d3.select(dom_element_to_append_to)
  .selectAll('svg')
  .data([dataset])
  .enter()
  .append('svg')
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append('g')
  .attr("transform",
      "translate(" + ( (width )/2 - (radial_labels.length*segmentHeight + innerRadius)  ) + "," + margin.top + ")")
  .call(chart);

  var tooltip = d3.select(dom_element_to_append_to)
  .append('div')
  .attr('class', 'tooltip');

  tooltip.append('div')
  .attr('class', 'month');
  tooltip.append('div')
  .attr('class', 'value');
  tooltip.append('div')
  .attr('class', 'type');

  svg.selectAll("path")
  .on('mouseover', function(d) {
      tooltip.select('.month').html("<b> Month: " + d.month + "</b>");
      tooltip.select('.type').html("<b> Type: " + d.type + "</b>");
      tooltip.select('.value').html("<b> Value: " + d.value + "</b>");

      tooltip.style('display', 'block');
      tooltip.style('opacity',2);
  })
  .on('mousemove', function(d) {

      tooltip.style('top', (d3.event.layerY + 10) + 'px')
      .style('left', (d3.event.layerX - 25) + 'px');
  })
  .on('mouseout', function(d) {
      tooltip.style('display', 'none');
      tooltip.style('opacity',0);
  });
}

function circularHeatChart() {
  var margin = {top: 20, right: 20, bottom: 20, left: 20},
  innerRadius = 20,
  numSegments = 12,
  segmentHeight = 20,
  domain = null,
  range = ["white", "red"],
  accessor = function(d) {return d;},
  radialLabels = segmentLabels = [];

  function chart(selection) {
      selection.each(function(data) {
          var svg = d3.select(this);

          var offset = innerRadius + Math.ceil(data.length / numSegments) * segmentHeight;
          g = svg.append("g")
              .classed("circular-heat", true)
              .attr("transform", "translate(" + parseInt(margin.left + offset) + "," + parseInt(margin.top + offset) + ")");

          var autoDomain = false;
          if (domain === null) {
              domain = d3.extent(data, accessor);
              autoDomain = true;
          }
          var color = d3.scale.linear().domain(domain).range(range);
          if(autoDomain)
              domain = null;

          g.selectAll("path").data(data)
              .enter().append("path")
              .attr("d", d3.svg.arc().innerRadius(ir).outerRadius(or).startAngle(sa).endAngle(ea))
              .attr("stroke", function(d) {return "#4f5b69";})
              .attr("fill", function(d) {return color(accessor(d));});

          // Unique id so that the text path defs are unique - is there a better way to do this?
          var id = d3.selectAll(".circular-heat")[0].length;

          //Radial labels
          var lsa = 0.01; //Label start angle
          var labels = svg.append("g")
              .classed("labels", true)
              .classed("radial", true)
              .attr("transform", "translate(" + parseInt(margin.left + offset) + "," + parseInt(margin.top + offset) + ")");

          labels.selectAll("def")
              .data(radialLabels).enter()
              .append("def")
              .append("path")
              .attr("id", function(d, i) {return "radial-label-path-"+id+"-"+i;})
              .attr("d", function(d, i) {
                  var r = innerRadius + ((i + 0.2) * segmentHeight);
                  return "m" + r * Math.sin(lsa) + " -" + r * Math.cos(lsa) +
                          " a" + r + " " + r + " 0 1 1 -1 0";
              });

          labels.selectAll("text")
              .data(radialLabels).enter()
              .append("text")
              .append("textPath")
              .attr("xlink:href", function(d, i) {return "#radial-label-path-"+id+"-"+i;})
              .style("font-size", "16px")
              .text(function(d) {return d;});

          //Segment labels
          var segmentLabelOffset = 2;
          var r = innerRadius + Math.ceil(data.length / numSegments) * segmentHeight + segmentLabelOffset;
          labels = svg.append("g")
              .classed("labels", true)
              .classed("segment", true)
              .attr("transform", "translate(" + parseInt(margin.left + offset) + "," + parseInt(margin.top + offset) + ")");

          labels.append("def")
              .append("path")
              .attr("id", "segment-label-path-"+id)
              .attr("d", "m0 -" + r + " a" + r + " " + r + " 0 1 1 -1 0");

          labels.selectAll("text")
              .data(segmentLabels).enter()
              .append("text")
              .append("textPath")
              .attr("xlink:href", "#segment-label-path-"+id)
              .style("font-size", "16px")
              .attr("startOffset", function(d, i) {return i * 100 / numSegments + "%";})
              .text(function(d) {return d;});
      });

  }

  /* Arc functions */
  ir = function(d, i) {
      return innerRadius + Math.floor(i/numSegments) * segmentHeight;
  }
  or = function(d, i) {
      return innerRadius + segmentHeight + Math.floor(i/numSegments) * segmentHeight;
  }
  sa = function(d, i) {
      return (i * 2 * Math.PI) / numSegments;
  }
  ea = function(d, i) {
      return ((i + 1) * 2 * Math.PI) / numSegments;
  }

  /* Configuration getters/setters */
  chart.margin = function(_) {
      if (!arguments.length) return margin;
      margin = _;
      return chart;
  };

  chart.innerRadius = function(_) {
      if (!arguments.length) return innerRadius;
      innerRadius = _;
      return chart;
  };

  chart.numSegments = function(_) {
      if (!arguments.length) return numSegments;
      numSegments = _;
      return chart;
  };

  chart.segmentHeight = function(_) {
      if (!arguments.length) return segmentHeight;
      segmentHeight = _;
      return chart;
  };

  chart.domain = function(_) {
      if (!arguments.length) return domain;
      domain = _;
      return chart;
  };

  chart.range = function(_) {
      if (!arguments.length) return range;
      range = _;
      return chart;
  };

  chart.radialLabels = function(_) {
      if (!arguments.length) return radialLabels;
      if (_ == null) _ = [];
      radialLabels = _;
      return chart;
  };

  chart.segmentLabels = function(_) {
      if (!arguments.length) return segmentLabels;
      if (_ == null) _ = [];
      segmentLabels = _;
      return chart;
  };

  chart.accessor = function(_) {
      if (!arguments.length) return accessor;
      accessor = _;
      return chart;
  };

  return chart;
}

circular-heatmap.component.ts

import { Component, OnInit } from '@angular/core';


declare function loadCircularHeatMap(dataset:any, dom_element_to_append_to:any, radial_labels:any, segment_labels:any):any;

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

  constructor() { }

  ngOnInit(){
    var inputData =
    [{month:1,type:"Category 1",value:25},
    {month:2,type:"Category 1",value:15},
    {month:3,type:"Category 1",value:27},
    {month:4,type:"Category 1",value:10},
    {month:5,type:"Category 1",value:54},
    {month:6,type:"Category 1",value:23},
    {month:7,type:"Category 1",value:31},
    {month:8,type:"Category 1",value:17},
    {month:9,type:"Category 1",value:8},
    {month:10,type:"Category 1",value:12},
    {month:11,type:"Category 1",value:32},
    {month:12,type:"Category 1",value:35},
    {month:1,type:"Category 2",value:19},
    {month:2,type:"Category 2",value:24},
    {month:3,type:"Category 2",value:27},
    {month:4,type:"Category 2",value:12},
    {month:5,type:"Category 2",value:19},
    {month:6,type:"Category 2",value:30},
    {month:7,type:"Category 2",value:31},
    {month:8,type:"Category 2",value:25},
    {month:9,type:"Category 2",value:20},
    {month:10,type:"Category 2",value:5},
    {month:11,type:"Category 2",value:21},
    {month:12,type:"Category 2",value:10},
    {month:1,type:"Category 3",value:19},
    {month:2,type:"Category 3",value:3},
    {month:3,type:"Category 3",value:32},
    {month:4,type:"Category 3",value:23},
    {month:5,type:"Category 3",value:9},
    {month:6,type:"Category 3",value:17},
    {month:7,type:"Category 3",value:25},
    {month:8,type:"Category 3",value:29},
    {month:9,type:"Category 3",value:32},
    {month:10,type:"Category 3",value:33},
    {month:11,type:"Category 3",value:19},
    {month:12,type:"Category 3",value:24},
    {month:1,type:"Category 4",value:12},
    {month:2,type:"Category 4",value:43},
    {month:3,type:"Category 4",value:12},
    {month:4,type:"Category 4",value:23},
    {month:5,type:"Category 4",value:14},
    {month:6,type:"Category 4",value:19},
    {month:7,type:"Category 4",value:22},
    {month:8,type:"Category 4",value:39},
    {month:9,type:"Category 4",value:22},
    {month:10,type:"Category 4",value:26},
    {month:11,type:"Category 4",value:31},
    {month:12,type:"Category 4",value:25},
    ];

    var radial_labels = ["Category 1","Category 2","Category 3","Category 4"];
    var segment_labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

    loadCircularHeatMap(inputData,"#chart",radial_labels, segment_labels);

  }
}

circular-heatmap.component.css

path:hover{

  fill:#9b59b6;
  }
  
.tooltip {
  background: #eee;
  box-shadow: 0 0 5px #999999;
  color: #333;
  font-size: 12px;
  left: 130px;
  padding: 10px;
  position: absolute;
  text-align: center;
  top: 95px;
  z-index: 10;
  display: block;
  opacity: 0;
}
  
.title{
  font-size:16px;
}

I am certain that the Javascript function is being properly imported as the heatmap itself is getting imported without a problem.

I have even created a single page JS+HTML webpage if that helps.

<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Circular Heat Map</title>

<!-- JavaScript Libraries //-->
<script src="https://d3js.org/d3.v3.min.js"></script>

<!-- CSS Style //-->
<style type="text/css">
    path:hover{

fill:#9b59b6;
}

.tooltip {
    background: #eee;
    box-shadow: 0 0 5px #999999;
    color: #333;
    font-size: 12px;
    left: 130px;
    padding: 10px;
    position: absolute;
    text-align: center;
    top: 95px;
    z-index: 10;
    display: block;
    opacity: 0;
}

.title{
font-size:16px;
}
</style>

<script>
    function loadCircularHeatMap (dataset, dom_element_to_append_to,radial_labels,segment_labels) {

    var margin = {top: 50, right: 50, bottom: 50, left: 50};
    var width = 600 - margin.left - margin.right;

    var height = width;
    var innerRadius = width/14;
    var segmentHeight = (width - margin.top - margin.bottom - 2*innerRadius )/(2*radial_labels.length)

    var chart = circularHeatChart()
    .innerRadius(innerRadius)
    .segmentHeight(segmentHeight)
    .range(["white", "#01579b"])
    .radialLabels(radial_labels)
    .segmentLabels(segment_labels);

    chart.accessor(function(d) {return d.value;})

    var svg = d3.select(dom_element_to_append_to)
    .selectAll('svg')
    .data([dataset])
    .enter()
    .append('svg')
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append('g')
    .attr("transform",
        "translate(" + ( (width )/2 - (radial_labels.length*segmentHeight + innerRadius)  ) + "," + margin.top + ")")
    .call(chart);

    var tooltip = d3.select(dom_element_to_append_to)
    .append('div')
    .attr('class', 'tooltip');

    tooltip.append('div')
    .attr('class', 'month');
    tooltip.append('div')
    .attr('class', 'value');
    tooltip.append('div')
    .attr('class', 'type');

    svg.selectAll("path")
    .on('mouseover', function(d) {
        tooltip.select('.month').html("<b> Month: " + d.month + "</b>");
        tooltip.select('.type').html("<b> Type: " + d.type + "</b>");
        tooltip.select('.value').html("<b> Value: " + d.value + "</b>");

        tooltip.style('display', 'block');
        tooltip.style('opacity',2);
    })
    .on('mousemove', function(d) {

        tooltip.style('top', (d3.event.layerY + 10) + 'px')
        .style('left', (d3.event.layerX - 25) + 'px');
    })
    .on('mouseout', function(d) {
        tooltip.style('display', 'none');
        tooltip.style('opacity',0);
    });
}

function circularHeatChart() {
    var margin = {top: 20, right: 20, bottom: 20, left: 20},
    innerRadius = 20,
    numSegments = 12,
    segmentHeight = 20,
    domain = null,
    range = ["white", "red"],
    accessor = function(d) {return d;},
    radialLabels = segmentLabels = [];

    function chart(selection) {
        selection.each(function(data) {
            var svg = d3.select(this);

            var offset = innerRadius + Math.ceil(data.length / numSegments) * segmentHeight;
            g = svg.append("g")
                .classed("circular-heat", true)
                .attr("transform", "translate(" + parseInt(margin.left + offset) + "," + parseInt(margin.top + offset) + ")");

            var autoDomain = false;
            if (domain === null) {
                domain = d3.extent(data, accessor);
                autoDomain = true;
            }
            var color = d3.scale.linear().domain(domain).range(range);
            if(autoDomain)
                domain = null;

            g.selectAll("path").data(data)
                .enter().append("path")
                .attr("d", d3.svg.arc().innerRadius(ir).outerRadius(or).startAngle(sa).endAngle(ea))
                .attr("stroke", function(d) {return "#4f5b69";})
                .attr("fill", function(d) {return color(accessor(d));});

            // Unique id so that the text path defs are unique - is there a better way to do this?
            var id = d3.selectAll(".circular-heat")[0].length;

            //Radial labels
            var lsa = 0.01; //Label start angle
            var labels = svg.append("g")
                .classed("labels", true)
                .classed("radial", true)
                .attr("transform", "translate(" + parseInt(margin.left + offset) + "," + parseInt(margin.top + offset) + ")");

            labels.selectAll("def")
                .data(radialLabels).enter()
                .append("def")
                .append("path")
                .attr("id", function(d, i) {return "radial-label-path-"+id+"-"+i;})
                .attr("d", function(d, i) {
                    var r = innerRadius + ((i + 0.2) * segmentHeight);
                    return "m" + r * Math.sin(lsa) + " -" + r * Math.cos(lsa) +
                            " a" + r + " " + r + " 0 1 1 -1 0";
                });

            labels.selectAll("text")
                .data(radialLabels).enter()
                .append("text")
                .append("textPath")
                .attr("xlink:href", function(d, i) {return "#radial-label-path-"+id+"-"+i;})
                .style("font-size", "16px")
                .text(function(d) {return d;});

            //Segment labels
            var segmentLabelOffset = 2;
            var r = innerRadius + Math.ceil(data.length / numSegments) * segmentHeight + segmentLabelOffset;
            labels = svg.append("g")
                .classed("labels", true)
                .classed("segment", true)
                .attr("transform", "translate(" + parseInt(margin.left + offset) + "," + parseInt(margin.top + offset) + ")");

            labels.append("def")
                .append("path")
                .attr("id", "segment-label-path-"+id)
                .attr("d", "m0 -" + r + " a" + r + " " + r + " 0 1 1 -1 0");

            labels.selectAll("text")
                .data(segmentLabels).enter()
                .append("text")
                .append("textPath")
                .attr("xlink:href", "#segment-label-path-"+id)
                .style("font-size", "16px")
                .attr("startOffset", function(d, i) {return i * 100 / numSegments + "%";})
                .text(function(d) {return d;});
        });

    }

    /* Arc functions */
    ir = function(d, i) {
        return innerRadius + Math.floor(i/numSegments) * segmentHeight;
    }
    or = function(d, i) {
        return innerRadius + segmentHeight + Math.floor(i/numSegments) * segmentHeight;
    }
    sa = function(d, i) {
        return (i * 2 * Math.PI) / numSegments;
    }
    ea = function(d, i) {
        return ((i + 1) * 2 * Math.PI) / numSegments;
    }

    /* Configuration getters/setters */
    chart.margin = function(_) {
        if (!arguments.length) return margin;
        margin = _;
        return chart;
    };

    chart.innerRadius = function(_) {
        if (!arguments.length) return innerRadius;
        innerRadius = _;
        return chart;
    };

    chart.numSegments = function(_) {
        if (!arguments.length) return numSegments;
        numSegments = _;
        return chart;
    };

    chart.segmentHeight = function(_) {
        if (!arguments.length) return segmentHeight;
        segmentHeight = _;
        return chart;
    };

    chart.domain = function(_) {
        if (!arguments.length) return domain;
        domain = _;
        return chart;
    };

    chart.range = function(_) {
        if (!arguments.length) return range;
        range = _;
        return chart;
    };

    chart.radialLabels = function(_) {
        if (!arguments.length) return radialLabels;
        if (_ == null) _ = [];
        radialLabels = _;
        return chart;
    };

    chart.segmentLabels = function(_) {
        if (!arguments.length) return segmentLabels;
        if (_ == null) _ = [];
        segmentLabels = _;
        return chart;
    };

    chart.accessor = function(_) {
        if (!arguments.length) return accessor;
        accessor = _;
        return chart;
    };

    return chart;
}
</script>
</head>

<body>
    <div style="margin-left:50px;"  id="chart"></div>
</body>
<script>
    var inputData =
    [{month:1,type:"Category 1",value:25},
    {month:2,type:"Category 1",value:15},
    {month:3,type:"Category 1",value:27},
    {month:4,type:"Category 1",value:10},
    {month:5,type:"Category 1",value:54},
    {month:6,type:"Category 1",value:23},
    {month:7,type:"Category 1",value:31},
    {month:8,type:"Category 1",value:17},
    {month:9,type:"Category 1",value:8},
    {month:10,type:"Category 1",value:12},
    {month:11,type:"Category 1",value:32},
    {month:12,type:"Category 1",value:35},
    {month:1,type:"Category 2",value:19},
    {month:2,type:"Category 2",value:24},
    {month:3,type:"Category 2",value:27},
    {month:4,type:"Category 2",value:12},
    {month:5,type:"Category 2",value:19},
    {month:6,type:"Category 2",value:30},
    {month:7,type:"Category 2",value:31},
    {month:8,type:"Category 2",value:25},
    {month:9,type:"Category 2",value:20},
    {month:10,type:"Category 2",value:5},
    {month:11,type:"Category 2",value:21},
    {month:12,type:"Category 2",value:10},
    {month:1,type:"Category 3",value:19},
    {month:2,type:"Category 3",value:3},
    {month:3,type:"Category 3",value:32},
    {month:4,type:"Category 3",value:23},
    {month:5,type:"Category 3",value:9},
    {month:6,type:"Category 3",value:17},
    {month:7,type:"Category 3",value:25},
    {month:8,type:"Category 3",value:29},
    {month:9,type:"Category 3",value:32},
    {month:10,type:"Category 3",value:33},
    {month:11,type:"Category 3",value:19},
    {month:12,type:"Category 3",value:24},
    {month:1,type:"Category 4",value:12},
    {month:2,type:"Category 4",value:43},
    {month:3,type:"Category 4",value:12},
    {month:4,type:"Category 4",value:23},
    {month:5,type:"Category 4",value:14},
    {month:6,type:"Category 4",value:19},
    {month:7,type:"Category 4",value:22},
    {month:8,type:"Category 4",value:39},
    {month:9,type:"Category 4",value:22},
    {month:10,type:"Category 4",value:26},
    {month:11,type:"Category 4",value:31},
    {month:12,type:"Category 4",value:25},
    ];

    var radial_labels = ["Category 1","Category 2","Category 3","Category 4"];
    var segment_labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

    loadCircularHeatMap(inputData,"#chart",radial_labels, segment_labels);
</script>
</html> 

Any leads on this issue is appreciated. Thanks in advance.