D3 鼠标悬停返回名称

Question

我是 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

      });

Answer 1

我已经使用 svg 标题用工具提示更新了您的代码片段。不知道为什么它不适合你。您可以将试用代码与代码段进行比较以找出根本原因。var width = 500,&nbsp; height = 300;var svg = d3.select("#chart")&nbsp; .append("svg")&nbsp; .attr("height", height)&nbsp; .attr("width", width)&nbsp; .append("g")&nbsp; .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")var defs = svg.append("defs");defs.append("pattern")&nbsp; .attr("id", "flag")&nbsp; .attr("height", "100%")&nbsp; .attr("width", "100%")&nbsp; .attr("patternContentUnits", "objectBoundingBox")&nbsp; .append("image")&nbsp; .attr("height", 1)&nbsp; .attr("width", 1)&nbsp; .attr("preserveAspectRatio", "none")&nbsp; .attr("xmlns:xlink", "http://www.w3.org/1999/xlink")&nbsp; .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()&nbsp; .force("x", d3.forceX().strength(0.05))&nbsp; .force("y", d3.forceY().strength(0.05))&nbsp; .force("collide", d3.forceCollide(function(d) {&nbsp; &nbsp; return radiusScale(d.casualities) + 1;&nbsp; }));var datapoints = [{&nbsp; &nbsp; "Country": "algeria",&nbsp; &nbsp; "casualities": 4760,&nbsp; &nbsp; "image_path": "images/algeria.jpg"&nbsp; },&nbsp; {&nbsp; &nbsp; "Country": "bahrain",&nbsp; &nbsp; "casualities": 67,&nbsp; &nbsp; "image_path": "images/bahrain.jpg"&nbsp; },&nbsp; {&nbsp; &nbsp; "Country": "canada",&nbsp; &nbsp; "casualities": 48,&nbsp; &nbsp; "image_path": "images/canada.png"&nbsp; },&nbsp; {&nbsp; &nbsp; "Country": "egypt",&nbsp; &nbsp; "casualities": 5129,&nbsp; &nbsp; "image_path": "images/egypt.png"&nbsp; },&nbsp; {&nbsp; &nbsp; "Country": "international",&nbsp; &nbsp; "casualities": 13,&nbsp; &nbsp; "image_path": "images/international.png"&nbsp; },&nbsp; {&nbsp; &nbsp; "Country": "iran",&nbsp; &nbsp; "casualities": 1210,&nbsp; &nbsp; "image_path": "images/iran.png"&nbsp; },&nbsp; {&nbsp; &nbsp; "Country": "iraq",&nbsp; &nbsp; "casualities": 74473,&nbsp; &nbsp; "image_path": "images/iraq.png"&nbsp; },&nbsp; {&nbsp; &nbsp; "Country": "israel",&nbsp; &nbsp; "casualities": 5129,&nbsp; &nbsp; "image_path": "images/israel.png"&nbsp; },&nbsp; {&nbsp; &nbsp; "Country": "jordan",&nbsp; &nbsp; "casualities": 278,&nbsp; &nbsp; "image_path": "images/jordan.png"&nbsp; }];defs.selectAll(".flag-pattern")&nbsp; .data(datapoints)&nbsp; .enter().append("pattern")&nbsp; .attr("class", "flag-pattern")&nbsp; .attr("id", function(d) {&nbsp; &nbsp; return d.Country&nbsp; })&nbsp; .attr("height", "100%")&nbsp; .attr("width", "100%")&nbsp; .attr("patternContentUnits", "objectBoundingBox")&nbsp; .append("image")&nbsp; .attr("height", 1)&nbsp; .attr("width", 1)&nbsp; .attr("preserveAspectRatio", "none")&nbsp; .attr("xmlns:xlink", "http://www.w3.org/1999/xlink")&nbsp; .attr("xlink:href", function(d) {&nbsp; &nbsp; return "https://cdn1.iconfinder.com/data/icons/major-world-flags-1/512/india_flag_circle-512.png"&nbsp; });var circles = svg.selectAll(".Country")&nbsp; .data(datapoints)&nbsp; .enter().append("circle")&nbsp; .attr("class", "Country")&nbsp; .attr("r", function(d) {&nbsp; &nbsp; return radiusScale(d.casualities);&nbsp; })&nbsp; .on('click', function(d) {&nbsp; &nbsp; console.log(d)&nbsp; })&nbsp; .attr("fill", function(d) {&nbsp; &nbsp; return "url(#" + d.Country + ")"&nbsp; });&nbsp;&nbsp;circles.append("svg:title")&nbsp; .text(function(d, i) {&nbsp; &nbsp; return d.Country&nbsp; });simulation.nodes(datapoints)&nbsp; .on('tick', ticked)function ticked() {&nbsp; circles&nbsp; &nbsp; .attr("cx", function(d) {&nbsp; &nbsp; &nbsp; return d.x&nbsp; &nbsp; })&nbsp; &nbsp; .attr("cy", function(d) {&nbsp; &nbsp; &nbsp; return d.y&nbsp; &nbsp; })}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script><div id="chart"></div>