[英]Putting HTML Table into ToolTip in D3.js
我創建了一個共生矩陣,當被占用的單元格懸停時,它會創建一個工具提示。 代碼如下:
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'更具描述性的東西可能是一個好主意)
通常工具提示還需要在不同元素被篡改時更新其內容; 我不認為你在這里試圖這樣做嗎?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.