javascript - d3.js 表格工具提示不会消失

Question

现在，当我将鼠标悬停在共现矩阵中的某个元素上时(类似于 mike bostick 的《悲惨世界》示例)，会出现一个带有信息表的工具提示。要生成表格并将其附加到 div 工具提示，我使用以下代码:

function tabulate(data, columns) {
  var table = div.append("table")
      thead = table.append("thead"),
      tbody = table.append("tbody");

  // append the header row
  thead.append("tr")
      .selectAll("th")
      .data(columns)
      .enter()
      .append("th")
          .text(function(column) { return column; });

  // create a row for each object in the data
  var rows = tbody.selectAll("tr")
      .data(data)
      .enter()
      .append("tr");

  // create a cell in each row for each column
  var cells = rows.selectAll("td")
      .data(function(row) {
          return columns.map(function(column) {
              return {column: column, value: row[column]};
          });
      })
      .enter()
      .append("td")
          .text(function(d) { return d.value; });

  return table;

}

这工作得很好，每次我将鼠标悬停在元素上时都会生成表格。我的mousemove、mouseover和mouseout函数如下:

function mousemove(d) {
    tabulate(nodes[d.x].tableInfo[d.y], ['site', 'win1', 'bid1', 'win2', 'bid2'])
    div
      .style("left", (d3.event.pageX) + "px")
      .style("top", (d3.event.pageY) + "px" )
}

function mouseover(p) {
    div.transition()
        .duration(300)
        .style("opacity", 1);
    d3.selectAll(".row text").classed("active", function(d, i) { return i == p.y; });
    d3.selectAll(".column text").classed("active", function(d, i) { return i == p.x; });
}

function mouseout() {
    div.transition()
        .duration(300)
        .style("opacity", 1e-6);
    d3.selectAll("text").classed("active", false);
}

现在我遇到的问题是，每次我将鼠标悬停在该元素上时，都会再次生成表格，并且旧表格不会被删除。有什么办法可以在鼠标移开时删除旧元素吗？谢谢。

Answer 1

只需在添加新表之前删除旧表即可:

function tabulate(data, columns) {
  div.select("table").remove();
  var table = div.append("table"),
  ect