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,

  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>