Javascript D3鼠标悬停返回名称

嗨，我是d3的新手，在制作图表时，我试图在悬停/鼠标上方添加文本。 有谁能提出一个实施的方法吗？ 我尝试了很多选项，比如创建一个div变量来选择div id，在圆圈中添加一个标题，并给出一个文本，但到目前为止没有任何效果

以下是我的js代码：

  var width = 900,
    height = 500;

  var svg = d3.select("#chart")
    .append("svg")
    .attr("height", height)
    .attr("width", width)
    .append("g")
    .attr("transform", "translate(" + width/2+"," + height/2 +")")

  var defs = svg.append("defs");

  defs.append("pattern")
    .attr("id", "flag")
    .attr("height", "100%")
    .attr("width", "100%")
    .attr("patternContentUnits", "objectBoundingBox")
    .append("image")
    .attr("height", 1)
    .attr("width", 1)
    .attr("preserveAspectRatio", "none")
    .attr("xmlns:xlink", "http://www.w3.org/1999/xlink")
    .attr("xlink:href", "images/usa.gif");

  var radiusScale = d3.scaleSqrt().domain([0, 61000]).range([5, 40])

  // the simulation is a collection of forces
  // about where we want our circles to go
  // and how we want our circles to interact
  // STEP ONE: get them to the middle
  // STEP TWO: don't have them collide!!!
  var simulation = d3.forceSimulation()
    .force("x", d3.forceX().strength(0.05))
    .force("y", d3.forceY().strength(0.05))
    .force("collide", d3.forceCollide(function(d) {
      return radiusScale(d.casualities) + 1;
    }))


  d3.csv("sub_country.csv ").then(ready)

  function ready (datapoints) {


    defs.selectAll(".flag-pattern")
      .data(datapoints)
      .enter().append("pattern")
      .attr("class", "flag-pattern")
      .attr("id", function(d) {
          return d.Country 
      })
      .attr("height", "100%")
      .attr("width", "100%")
      .attr("patternContentUnits", "objectBoundingBox")
      .append("image")
      .attr("height", 1)
      .attr("width", 1)
      .attr("preserveAspectRatio", "none")
      .attr("xmlns:xlink", "http://www.w3.org/1999/xlink")
      .attr("xlink:href", function(d) {
        return d.image_path
      });


    var circles = svg.selectAll(".Country")
      .data(datapoints)
      .enter().append("circle")
      .attr("class", "Country")  
      .attr("r", function(d) {
        return radiusScale(d.casualities);
      })
      .on('click', function(d) {
        console.log(d)
      })
      .attr("fill", function(d) {
        return "url(#" + d.Country + ")"
      })


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

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

            }

  }

})();

数据如下所示：

Country,casualities,image_path
algeria,4760,images/algeria.jpg
bahrain,67,images/bahrain.jpg
canada,48,images/canada.png
egypt,5129,images/egypt.png
international,13,images/international.png
iran,1210,images/iran.png
iraq,74473,images/iraq.png
israel,5129,images/israel.png
jordan,278,images/jordan.png

---

提前谢谢

我已经使用svg标题更新了您的代码片段，并提供了工具提示。不知道为什么它对你不起作用

您可以将试用代码与代码片段进行比较，以找到根本原因

var宽度=500，
高度=300；
var svg=d3。选择（“图表”）
.append（“svg”）
.attr（“高度”，高度）
.attr（“宽度”，宽度）
.附加（“g”）
.attr（“变换”、“平移”（“+width/2+”，“+height/2+”）
var defs=svg.append（“defs”）；
定义附加（“模式”）
.attr（“id”、“标志”）
.attr（“高度”、“100%”）
.attr（“宽度”、“100%”）
.attr（“patternContentUnits”、“objectBoundingBox”）
.append（“图像”）
.attr（“高度”，1）
.attr（“宽度”，1）
.attr（“保留Aspectratio”、“无”）
.attr（“xmlns:xlink”http://www.w3.org/1999/xlink")
.attr（“xlink:href”，“images/usa.gif”）；
var radiusScale=d3.scaleSqrt（）.domain（[061000]）.range（[5,40]）
//模拟是一组力的集合
//关于我们希望我们的圈子去哪里
//以及我们希望我们的圈子如何互动
//第一步：把它们放在中间
//第二步：不要让它们碰撞！！！
var simulation=d3.forceSimulation（）
.力（“x”，d3.力x（）.强度（0.05））
.力（“y”，d3.力（）.强度（0.05））
.力（“碰撞”，d3.力碰撞（功能（d）{
返回半径刻度（d.偶然性）+1；
}));
变量数据点=[{
“国家”：“阿尔及利亚”，
“随意性”：4760，
“image_path”：“images/alegaria.jpg”
},
{
“国家”：“巴林”，
“随意性”：67，
“image_path”：“images/bahrain.jpg”
},
{
“国家”：“加拿大”，
“随意性”：48，
“图像路径”：“images/canada.png”
},
{
“国家”：“埃及”，
“随意性”：5129，
“image_path”：“images/埃及.png”
},
{
“国家”：“国际”，
“随意性”：13，
“图像路径”：“images/international.png”
},
{
“国家”：“伊朗”，
“随意性”：1210，
“图像路径”：“images/iran.png”
},
{
“国家”：“伊拉克”，
“随意性”：74473，
“图像路径”：“images/irrak.png”
},
{
“国家”：“以色列”，
“随意性”：5129，
“image_path”：“images/israel.png”
},
{
“国家”：“约旦”，
“随意性”：278，
“图像路径”：“images/jordan.png”
}
];
defs.selectAll（“.flag模式”）
.数据（数据点）
.enter（）.append（“模式”）
.attr（“类”、“标志模式”）
.attr（“id”，函数（d）{
返回d.国家
})
.attr（“高度”、“100%”）
.attr（“宽度”、“100%”）
.attr（“patternContentUnits”、“objectBoundingBox”）
.append（“图像”）
.attr（“高度”，1）
.attr（“宽度”，1）
.attr（“保留Aspectratio”、“无”）
.attr（“xmlns:xlink”http://www.w3.org/1999/xlink")
.attr（“xlink:href”，函数（d）{
返回“https://cdn1.iconfinder.com/data/icons/major-world-flags-1/512/india_flag_circle-512.png"
});
var circles=svg.selectAll（“.Country”）
.数据（数据点）
.enter（）.append（“圆”）
.attr（“类别”、“国家”）
.attr（“r”，函数（d）{
返回半径刻度（d.偶然性）；
})
.on（'点击'）功能（d）{
控制台日志（d）
})
.attr（“填充”，功能（d）{
返回“url（#“+d.Country+”）”
});
圆。追加（“svg:title”）
.文本（功能（d，i）{
返回d.国家
});
模拟.节点（数据点）
.on（'勾选'，勾选）
函数勾选（）{
圈子
.attr（“cx”，功能（d）{
返回d.x
})
.attr（“cy”，函数（d）{
返回d.y
})
}