javascript - 如何制作带有嵌入 HTML 元素的 d3.js 工具提示

Question

我正在尝试在 d3.js 中制作带有嵌入元素(例如 img、h1 和 p 标签)的工具提示。 JavaScript 位于 Rails 应用程序中。工具提示应该在悬停在 g 元素上时动态更改文本。目前，我只是想在一个工具提示中显示一个 img 标签，并在悬停时动态更改文本。然而，每次我尝试完成这件事时，都会发生两件事。图像或文本要么显示(而不是同时显示)，要么 JavaScript 全部破坏。在下面的代码中，它仅显示文本的变化。图像根本不显示。我必须制作工具提示的代码是这样的:

var tooltip = d3.select("body")
.append("div").attr("id", "tool_tip").style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.style("background-color", "yellow")//.style("top","100px").style("left","20px")
.text("a simple tooltip").append("img").attr("src","http://www.metmuseum.org/~/media/Images/Metpublication/Cover/2004/Echoing_Images_Couples_in_African_Sculpture.jpg");

动态更改文本并在悬停时移动工具提示的代码如下:

 svg.append("g").attr("class","points")
  .selectAll("text").data(places.features)
.enter().append("path").attr("r", function(d){return 1234567})
  .attr("class", "point")
  .on("mouseover", function(d) {
      var div = document.getElementById('profile');
      var test = $('#test').text();
      div.innerHTML = "";
      div.innerHTML = div.innerHTML + d3.event.pageY+ ' X:'+d3.event.pageX +'<img src='+test+'>';


      $('#tool_tip').css("top",d3.event.pageY);
      $('#tool_tip').css("left",d3.event.pageX);


      $('#tool_tip').css("visibility", "visible");
      $('#tool_tip img').css("visibility", "visible");
      var tool_tip = $('#tool_tip');

     // alert($(this).attr('d'));

      var j = places.features[0].properties.name
      //adding text to tool tip by different points
     // alert(JSON.stringify(d.properties.TeamName));
    // alert(JSON.stringify(d));
      $('#tool_tip').text(d.properties[0].TeamName);

     // return tooltip;//.style("visibility", "visible");
    //Warren you need to build out the pop up here.  Ideally you can pull the data from the json object "places.json."

  });

Answer 1

我首先必须从

中的工具提示变量中删除 .append("img").attr("src","http://www.metmuseum.org/~/media/Images/Metpublication/Cover/2004/Echoing_Images_Couples_in_African_Sculpture.jpg");

 var tooltip = d3.select("body")
.append("div").attr("id", "tool_tip").style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.style("background-color", "yellow")//.style("top","100px").style("left","20px")
.text("a simple tooltip").append("img").attr("src","http://www.metmuseum.org/~/media/Images/Metpublication/Cover/2004/Echoing_Images_Couples_in_African_Sculpture.jpg");

这导致页面渲染时嵌入图像标签。它还导致文本在嵌入图像内形成，而不是在 #tool_tip div 之后形成。至于在代码块内形成鼠标悬停时的工具提示

svg.append("g").attr("class","points")
.selectAll("text").data(places.features)
.enter().append("path").attr("r", function(d){return 1234567})
.attr("class", "point")
.on("mouseover", function(d) {...

我在我的问题中发布了我删除了 $('#tool_tip').text(d.properties[0].TeamName); 并添加了这行代码 return tooltip.html(d.properties[0].TeamName+"<img src = 'http://www.metmuseum.org/~/media/Images/Metpublication/Cover/2004/Echoing_Images_Couples_in_African_Sculpture.jpg'>")//text(d.properties[0].TeamName);//.append("img").attr("src","http://www.metmuseum.org/~/media/Images/Metpublication/Cover/2004/Echoing_Images_Couples_in_African_Sculpture.jpg");
.html() 函数允许我在悬停时正确格式化 #tool_tip div 中的 html。