d3.js : Select this element on mouseover

Question

Using d3.js to create a bubble chart. Wanting to hover over a certain bubble and change the style. In the second variable I'm wanting to hover over the current node(circle) but getting error 'Cannot read property 'setProperty' of undefined. When console.log('d') I retrieve the current node(circle) that is passed but cannot style that either. d3.select(this) is useless. What am I missing?

 chart = () => {

    var diameter = document.getElementById("test").offsetHeight;
    var bubble = d3
      .pack(this.state.data)
      .size([diameter, diameter])
      .padding(20);

    var svg = d3
      .select("#test")
      .append("svg")
      .attr("width", diameter)
      .attr("height", diameter)
      .attr("class", "bubble");

    var nodes = d3.hierarchy(this.state.data).sum(function(d) {
      return d.subscribers;
    });

    var node = svg
      .selectAll(".node")
      .data(bubble(nodes).descendants())
      .enter()
      .filter(function(d) {
        return !d.children;
      })
      .append("g")
      .attr("class", "node")
      .attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
      });

    node.append("title").text(function(d) {
      return d.data.subscribers;
    });



    node
      .append("circle")
      .attr("r", function(d) {
        return d.r;
      })
      .style("fill", "c81912")
      .on("mouseover", (d,i) => {

      })

    node
      .append("text")
      .attr("dy", ".2em")
      .style("text-anchor", "middle")
      .text(function(d) {
        return d.data.service;
      })
      .attr("font-family", "sans-serif")
      .attr("font-size", function(d) {
        return d.r / 5;
      })
      .attr("fill", "black");

    d3.select(this.frameElement).style("height", diameter + "px");
  };