Javascript 在交互式气泡图（d3.v4）上添加工具提示

我试图在这个简单的bubblechart中添加一个工具提示，在每个气泡的鼠标上方显示键/值对。我也很难在mouseover上为单个气泡添加边框，这是我想添加到这个可视化中的另一个样式组件

这是我的密码：

var width = 400,
height = 400;

var svg = d3.select("#borough")
.append("svg")
.attr("height", height)
.attr("width", width)
.append("g")
.attr("transform", "translate(0,0)")

var toolTip = d3.select('body').append('div').attr('class', 
'tooltipbor').style('opacity', 0)

var simulation = d3.forceSimulation()
.force("x", d3.forceX(width / 2).strength(0.05))
.force("y", d3.forceY(height / 2).strength(0.05))
.force("collide", d3.forceCollide(function(d) {
return radiusScale(d.number)+ 1;
}))

var radiusScale = d3.scaleSqrt().domain(["0.26", "1.07"]).range([5,60])

d3.queue()
.defer(d3.csv, "borough.csv")
.await(ready)

function ready (error, datapoints) {

var circles = svg.selectAll(".rate")
.data(datapoints)
.enter().append("circle")
.attr("class", "rate")
.attr("r", function(d) {
return radiusScale(d.number)
})
.attr("fill", function (d) {
        if (d.borough === "StatenIsland") {
            return "#EAC435"
        } else if (d.borough === "Queens") {
            return "#345995"
        } else if (d.borough === "Manhattan") {
            return "#03CEA4"
        } else if (d.borough === "Brooklyn") {
            return "#FA7921"
          } else if (d.borough == "Bronx") {
            return "#E40066"
          }
              })

.on ('mouseover', function (d) {
  div.style("display", "inline")
})
.on('mousemove', function (d) {
      toolTip.transition()
      .duration(200)
      .style('opacity', 0.9)
      toolTip.html(`${d.borough} <br/>${d.number}`)
      .style('left', (d3.event.pageX + 10) + 'px')
      .style('top', (d3.event.pageY + 10) + 'px')
    })
    .on('mouseout', function (d) {
      toolTip.transition()
        .duration(500)
        .style('opacity', 0)
    })

simulation.nodes(datapoints)
.on('tick', ticked)

function ticked() {
circles
.attr("cx", function(d) {
  return d.x
  })
  .attr("cy", function(d) {
    return d.y
    })
 }  
}

---

提前谢谢你！也许不用说，但我对JavaScript非常陌生，更不用说d3了

你的工具提示会发生什么？是否有错误，是否显示在错误的位置？

borough,number
Bronx,1.07
Brooklyn,0.59
Manhattan,1.025
Queens,0.40
StatenIsland,0.26