在D3.js中将HTML表格放入工具提示中

Putting HTML Table into ToolTip in D3.js

本文关键字：工具提示 表格 HTML D3 js 中将      更新时间：2023-09-26

我创建了一个共现矩阵，当被占用的单元格悬停在上面时，它会创建一个工具提示。代码如下:

div.tooltip {
    position: absolute;
    text-align: left;
    width: 500px;
    color:white;
    padding: 8px;
    font: 13px sans-serif;
    background: black;
    border: solid 1px #aaa;
    pointer-events: none;
}
var div = d3.select("body").append("div")
  .attr("class", "tooltip")
  .style("opacity", 0);
function mousemove(d) {
      div
        .html("Tooltip is here")
        .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);
}

然后元素调用mousemove、mouseover和mouseout函数。这一切都很好，工具提示显示完美。我现在想做的是当我将鼠标悬停在一个条目上时生成一个表，并将该表放在工具提示中。我现在拥有的代码正确地生成了表格，但它没有将其放入工具提示中，而是在矩阵上方或下方生成了表格。我使用这个函数来生成表:

  function tabulate(data, columns) {
      var table = d3.select("body").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;
  }

有没有人能给我一些帮助，我如何能得到表内生成的工具提示?

目前，

var table = d3.select("body").append("table")

选择页面的整个主体并追加一个表格元素，使表格出现在页面的底部。

做一个小小的改变，

var table = div.append("table")

将获取工具提示元素并附加表格，以便它出现在工具提示中。(给工具提示命名一些比"div"更具描述性的东西可能是一个好主意)

当鼠标移到不同的元素上时，工具提示也需要更新它们的内容;但我觉得你不是想这么做吧?

相关文章：