D3 鼠标悬停 return 名称

Question

您好，我是 d3 的新手，我正在尝试在制作图表时在 hover/mouseover 上添加文本。任何人都可以建议一种实现它的方法吗？我尝试了很多选项，例如为 select div id 创建一个 div 变量，将标题附加到圆圈并提供文本，但到目前为止没有任何效果。

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

提前致谢！

Answer 1

我已经用 tool-tips 使用 svg 标题更新了您的代码片段。不确定为什么它对您不起作用。

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

var width = 500,
  height = 300;

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;
  }));


var datapoints = [{
    "Country": "algeria",
    "casualities": 4760,
    "image_path": "images/algeria.jpg"
  },
  {
    "Country": "bahrain",
    "casualities": 67,
    "image_path": "images/bahrain.jpg"
  },
  {
    "Country": "canada",
    "casualities": 48,
    "image_path": "images/canada.png"
  },
  {
    "Country": "egypt",
    "casualities": 5129,
    "image_path": "images/egypt.png"
  },
  {
    "Country": "international",
    "casualities": 13,
    "image_path": "images/international.png"
  },
  {
    "Country": "iran",
    "casualities": 1210,
    "image_path": "images/iran.png"
  },
  {
    "Country": "iraq",
    "casualities": 74473,
    "image_path": "images/iraq.png"
  },
  {
    "Country": "israel",
    "casualities": 5129,
    "image_path": "images/israel.png"
  },
  {
    "Country": "jordan",
    "casualities": 278,
    "image_path": "images/jordan.png"
  }
];


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 "https://cdn1.iconfinder.com/data/icons/major-world-flags-1/512/india_flag_circle-512.png"
  });


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 + ")"
  });
  
circles.append("svg:title")
  .text(function(d, i) {
    return 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
    })

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="chart"></div>

D3 鼠标悬停 return 名称

D3 mouseover return name

javascript

d3.js

d3-force-directed