d3.js：鼠标悬停时选择此元素

Question

使用d3.js创建气泡图。想要将鼠标悬停在某个气泡上并更改样式。在第二个变量中，我想将鼠标悬停在当前节点（圆圈）上，但得到错误“无法读取未定义的属性” setProperty”。当console.log（'d'）时，我检索已传递的当前节点（圆），但无法对其设置样式。 d3.select（this）没有用。我想念什么？

 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");
  };