请帮我将工具提示放在 svg 上

如何解决请帮我将工具提示放在 svg 上

嗨，我使用 d3.js 库在 lwc 组件中创建了一个图形，它可以正常工作，但是当我创建工具提示时，它没有显示在 svg 上

当鼠标悬停在 svg 项目上时，它会显示我想在 svg 项目上显示的 lwc 主体

 import { LightningElement,api,track,wire } from 'lwc';
import { loadScript,loadStyle } from 'lightning/platformResourceLoader';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
//import D3 from '@salesforce/resourceUrl/d3';
//import D3 from '@salesforce/resourceUrl/heatmapdatarisk';
import D3 from '@salesforce/resourceUrl/Advancetraceability_StaticResource';



export default class Heatmapfordatarisk extends LightningElement {
    //new method
    //@track mapOfValues = [];
    //@wire(getDataRisks)
    //retrieveDataRisks({data,error}) {
        //if(data) {
         
            //for(let key in data) {
                // Preventing unexcepted data
                //if (data.hasOwnProperty(key)) { // Filtering the data in the loop
                    //this.mapOfValues.push({value:data[key],key:key});
                //}
           // } 
       // }
        //else if(error) {
           // window.console.log(error);
        //}
    //}   
// end

    svgWidth = 1000;
    svgHeight = 1000;  
    d3Initialized = false;

    renderedCallback() {
      console.log("loaded callback ");

        if (this.d3Initialized) {
            return;
        }
        this.d3Initialized = true;

        Promise.all([
            loadScript(this,D3 + '/d3.v5.js'),//    loadScript(this,D3 + '/d3-scale-chromatic.v1.min.js'),])
            .then(() => {
                this.initializeD3();
            })
    }
    
     initializeD3() {
    console.log("loaded initializeD3");
   // set the dimensions and margins of the graph
var margin = {top: 80,right: 25,bottom: 30,left: 100},width = 650 - margin.left - margin.right,height = 450 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg =d3.select(this.template.querySelector('svg.d3'))
.append("svg")
  .attr("width",width + margin.left + margin.right+400)
  .attr("height",height + margin.top + margin.bottom)
.append("g")
  .attr("transform","translate(" + margin.left + "," + margin.top + ")");

//Read the data
var data = [{"group":"Rare","variable":"Insignificant","value":45,"color":"purple"},{"group":"Rare","variable":"Minimal","value":95,"variable":"Moderate","value":22,"color":"green"},"variable":"Significant","value":14,"variable":"Catastrophic","value":59,"color":"yellow"},{"group":"Unlikely","value":37,"value":81,"value":79,"value":84,"color":"orange"},{"group":"Probable","value":96,"value":98,"value":10,"value":86,"color":"red"},{"group":"Likely","value":75,"value":18,"value":92,"value":43,"value":16,{"group":"Almost Certain","value":44,"value":29,"value":58,"value":55,"value":65,"color":"red"}];
// Labels of row and columns -> unique identifier of the column called 'group' and 'variable'
  var myGroups = d3.map(data,function(d){return d.group;}).keys()
  var myVars = d3.map(data,function(d){return d.variable;}).keys()

  // Build X scales and axis:
  var x = d3.scaleBand()
    .range([ 0,width+200 ])
    .domain(myGroups)
    .padding(0.05);
  svg.append("g")
    .style("font-size",15)
    .attr("transform","translate(0," + height + ")")
    .call(d3.axisBottom(x).tickSize(0))
    .select(".domain").remove()

  // Build Y scales and axis:
  var y = d3.scaleBand()
    .range([ height,0 ])
    .domain(myVars)
    .padding(0.05);
  svg.append("g")
    .style("font-size",15)
    .call(d3.axisLeft(y).tickSize(0))
    .select(".domain").remove()

 // Build color scale
  var myColor = d3.scaleSequential()
    .interpolator(d3.interpolateInferno)
    .domain([1,100])
   
  //var div = d3.select("body").append("div")
  //.attr("class","tooltip")
  //style("opacity",1e-6);
    

  // create a tooltip
  var tooltip = d3.select("body").append("div")
    .style("opacity",0)
    .attr("id","mydataviz")
    .style("background-color","white")
    .style("border","solid")
    .style("border-width","5px")
    .style("border-radius","5px")
    .style("padding","5px")
    .style("position","fixed")

    var svg2=d3.select(tooltip);

    //d3.select(this.template.querySelector('svg.d3'))
  // Three function that change the tooltip when user hover / move / leave a cell
  var mouSEOver = function(d) {
    tooltip
      .style("opacity",1)
    d3.select(this)
      .style("stroke","black")
      .style("opacity",1)
  }
  var mousemove = function(d) {
  tooltip
      .html("The exact value of<br>this cell is: " + d.value)
      .style("left",(d3.mouse(this)[0]+70) + "px")
      .style("top",(d3.mouse(this)[1]) + "px")
  }
  var mouseleave = function(d) {
   tooltip
      .style("opacity",0)
    d3.select(this)
     .style("stroke","none")
    .style("opacity",0.8)
 }


  // add the squares
  svg.selectAll()
    .data(data,function(d) {return d.group+':'+d.variable;})
    .enter()
    .append("rect")
      .attr("x",function(d) { return x(d.group) })
      .attr("y",function(d) { return y(d.variable) })
      .attr("rx",4)
      .attr("ry",8)
      .attr("width",x.bandwidth() )
      .attr("height",y.bandwidth() )
      .style("fill",function(d) { return d.color} )
      .style("stroke-width",4)
      .style("stroke","none")
      .style("opacity",0.8)
    .on("mouSEOver",mouSEOver)
    .on("mouseleave",mouseleave)
    .on('mousemove',function(d,i){
      tooltip.html("The exact value of<br>this cell is: " + d.value)
      .style("left",(d3.mouse(this)[1]) + "px");
});
    
     // Add the points
    //Add Points    
    var dots = 
[{"group":"Likely","record":"Retention of environmental safety records"},"record":"Risk of Fines from European Union GDPR due to data breach"},"record":"Risk Management Case record"}];
    
  // Three function that change the tooltip when user hover / move / leave a cell
  var mouSEOver1 = function(d) {
    tooltip
      .style("opacity",1)
  }
  var mousemove1 = function(d) {
    tooltip
      .html("4. " + d.record)
      .style("left",(d3.mouse(this)[1]) + "px")
  }
  var mouseleave1 = function(d) {
    tooltip
      .style("opacity",0)
    d3.select(this)
      .style("stroke",0.8)
  }
     // Add the points
    svg
      .append("g")
      .selectAll("dot")
      .data(dots)
      .enter()
      .append("circle")
        .attr("class","myCircle")
        .attr("cx",function(d) { return x(d.group) + x.bandwidth()/2 } )
        .attr("cy",function(d) { return y(d.variable)+ y.bandwidth()/2 } )
        .attr("r",8)
        .attr("stroke","#69b3a2")
        .attr("stroke-width",3)
        .attr("fill","white")
        .on("mouSEOver",mouSEOver1)
        .on("mousemove",mousemove1)
        .on("mouseleave",mouseleave1)   
//})

// Add title to graph
svg.append("text")
        .attr("x",0)
        .attr("y",-50)
        .attr("text-anchor","left")
        .style("font-size","22px")
        .text("Data Risk Registry");

// Add subtitle to graph
svg.append("text")
        .attr("x",-20)
        .attr("text-anchor","14px")
        .style("fill","grey")
        .style("max-width",600)
        .text(" 'Risk score' is calculated as (Probability score + VeLocity score ) * Severity score");

    }
    
}

请任何人帮助我解决这个问题