我创建了一个共生矩阵,当被占用的单元格悬停时会创建工具提示。代码如下:
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;
}
有人可以帮我解决一下如何在工具提示中生成表格吗?
答案 0 :(得分:2)
目前,
var table = d3.select("body").append("table")
选择整个页面正文并附加一个表格元素,使表格显示在页面底部。
做一个小改动,
var table = div.append("table")
将获取您的工具提示元素并附加表格,使其显示在工具提示中。 (将工具提示命名为比'div'更具描述性的东西可能是一个好主意)
通常工具提示还需要在不同元素被鼠标悬停时更新其内容;我不认为你在这里试图这样做吗?