d3.js 表格工具提示没有消失

Question

现在，当我将鼠标悬停在我的共现矩阵中的一个元素上时（类似于 mike bostick 的 les miserables 示例），会出现一个带有信息表的工具提示。要生成表格并将其附加到 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