Javascript 如何在散点图D3图形中显示圆心处的工具提示？

我使用的是d3散点图，它在单击任意圆时显示工具提示。我必须以对话框的形式显示从圆心绘制的工具提示

var div = d3.select("body").append("div")
      .attr("class", "tooltip1")
      .style("opacity", 0);
    svg.append("g")
      .classed("x-axis", true)
      .attr("transform", "translate(0, " + (chart_height - padding) + ")")
      .call(x_axis)
    svg.append("text")
      .attr("class", "font-12 font-weight-bold")
      .attr("text-anchor", "middle")
      .attr("transform", "translate(" + (padding / 4) + "," + (chart_height / 1.5) + ")rotate(-90)")
      .text("OUTLETS");
    // create y_axis
    var y_axis = d3.axisLeft(y_scale)
      .ticks(10)
    svg.append("g")
      .classed("y-axis", true)
      .attr("transform", "translate(" + padding + ",-10)")
      .call(y_axis)

    // add circles
    svg.selectAll("circle")
      .data(data)
      .enter()
      .append("circle")
      .attr("cx", function (d) {
        return x_scale(d.Staff_count)
      })
      .attr("cy", function (d) {
        return y_scale(d.Outlets)
      })
      .attr("r", function (d) {
        return a_scale(d.Total_Sales)
      })
      .attr("fill", function (d) { return scatter_color(d.Total_Sales) })
      .on("click", function (d) {
        var st = state_ == 'India' ? d.State : d.District
        var colnme = state_ == 'India' ? 'State / Union Territory' : 'District'
        var arr = f_st_dist(list_names, colnme, st)
        var div_html = summary_config['scatter_div']
        var div_end = "<hr>" + "</div></div>" + ""
          _.each(arr, function (x) {
            div_end += div_html + "<span class='pr-5'>" + x.Company + "</span>" + "<span class='font-weight-bolder'>" + (indian_number_format(x.Total_Sales)) + "</span>" + "</div></div>"
          })
        $(".tooltip1").show()
        div.transition()
          .duration(100)
          .style("opacity", .9);
        if (state_ == 'India') {
          var btn_html = summary_config['btn_html']
          div.html(div_html + "<div class = 'custom_clr'>" + d.State + "</div>" + div_end + btn_html +" id='" + d.State + "'>District Details ></button>")
            .style("left", (d3.event.pageX) + "px")
            .style("top", (d3.event.pageY - 28) + "px");
        } else {
          div.html(div_html + "<div class = 'custom_clr'>" + "</div>" + d.District + div_end )
            .style("left", (d3.event.pageX) + "px")
            .style("top", (d3.event.pageY - 28) + "px");
        }
        tooltip_load()
        d3.event.stopPropagation()
      })

var div=d3.选择（“主体”）.追加（“div”）
.attr（“类”、“工具提示1”）
.样式（“不透明度”，0）；
svg.append（“g”）
.classed（“x轴”，真）
.attr（“变换”、“平移（0）”+（图表高度-填充）+”）
.呼叫（x_轴）
svg.append（“文本”）
.attr（“类别”，“字体-12字体粗体”）
.attr（“文本锚定”、“中间”）
.attr（“变换”、“平移”（+（填充/4）+）、“+（图表高度/1.5）+”）旋转（-90）”
.文本（“出口”）；
//创建y_轴
变量y_轴=d3。轴左（y_比例）
.滴答声（10）
svg.append（“g”）
.classed（“y轴”，真）
.attr（“转换”、“转换”（+padding+“，-10）”）
.呼叫（y_轴）
//添加圆圈
svg.selectAll（“圆圈”）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“cx”，功能（d）{
返回x_刻度（d.员工数量）
})
.attr（“cy”，函数（d）{
返回y_刻度（d出口）
})
.attr（“r”，函数（d）{
返回a_量表（d.总销售额）
})
.attr（“填充”，函数（d）{返回散点颜色（d.总销售额）}）
.打开（“单击”，功能（d）{
var st=州_=='印度'？d.州：d.区
var colnme=州？=“印度”？“州/联邦领土”：“地区”
var arr=f_st_dist（列表名称、列名、列名）
var div\u html=摘要配置['scatter\u div']
var div_end=“
”+“”+“””
_.每个（arr，功能（x）{
div_end++=div_html++++x.公司++++（印度数字格式（x.总销售额））++
})
$（“.tooltip1”）.show（）
过渡部（）
.持续时间（100）
.样式（“不透明度”，.9）；
如果（州=印度）{
var btn_html=summary_config['btn_html']
div.html（div_html+“”+d.State+“”+div_end+btn_html+“id=”“+d.State+“'>地区详细信息>”）
.style（“左”，“d3.event.pageX）+“px”）
.style（“top”，（d3.event.pageY-28）+“px”）；
}否则{
div.html（div_html+++++d.地区+div_end）
.style（“左”，“d3.event.pageX）+“px”）
.style（“top”，（d3.event.pageY-28）+“px”）；
}
工具提示\u加载（）
d3.event.stopPropagation（）事件
})

我必须像这样显示我的工具提示 谁能帮我解决这个问题