鼠标悬停定位工具提示 [英] Positioning tooltip with mouse hover
问题描述
我正在使用以下链接中找到的代码:
I am using the code found at the following link:
https://www.d3-graph-gallery.com/graph/heatmap_tooltip.html
如果下载此代码然后在浏览器中查看，您将注意到鼠标悬停时工具提示的位置不再相对于热图中的单元，而是朝着底部的长矩形显示.将此代码与我自己的代码集成后，我注意到了同样的情况.
If you download this code and then view it in a browser, you will notice the tooltip position on mouseover is no longer relative to the cell in the heat map but rather appears as a long rectangle towards the bottom. I noticed the same after integrating this code with my own.
我必须添加什么以使工具提示出现在相对于热图单元的位置?任何帮助将不胜感激.
What do I have to add to force the tooltip to appear in a position relative to the cell of the heat map? Any help would be greatly appreciated.
推荐答案
您可能会在该页面上下载了以红色(是HTML)显示在"edit me" 左侧的框，它下面的框是JavaScript.如果单击下载代码按钮，也会发生同样的情况，下载的文件仅包含HTML和JavaScript.
From that page, you probably downloaded the box just left to the "edit me" in red (which is the HTML) and the box below it, which is the JavaScript. The same happens if you click the Download Code button, the downloaded file contains only the HTML and the JavaScript.
那么，这就是你得到的:
So, this is what you get:
// set the dimensions and margins of the graph
var margin = {top: 30, right: 30, bottom: 30, left: 30},
width = 450 - margin.left - margin.right,
height = 450 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Labels of row and columns
var myGroups = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]
var myVars = ["v1", "v2", "v3", "v4", "v5", "v6", "v7", "v8", "v9", "v10"]
// Build X scales and axis:
var x = d3.scaleBand()
.range([ 0, width ])
.domain(myGroups)
.padding(0.01);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
// Build X scales and axis:
var y = d3.scaleBand()
.range([ height, 0 ])
.domain(myVars)
.padding(0.01);
svg.append("g")
.call(d3.axisLeft(y));
// Build color scale
var myColor = d3.scaleLinear()
.range(["white", "#69b3a2"])
.domain([1,100])
//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/heatmap_data.csv", function(data) {
// create a tooltip
var tooltip = d3.select("#my_dataviz")
.append("div")
.style("opacity", 0)
.attr("class", "tooltip")
.style("background-color", "white")
.style("border", "solid")
.style("border-width", "2px")
.style("border-radius", "5px")
.style("padding", "5px")
// Three function that change the tooltip when user hover / move / leave a cell
var mouseover = function(d) {
tooltip.style("opacity", 1)
}
var mousemove = function(d) {
tooltip
.html("The exact value of<br>this cell is: " + d.value)
.style("left", (d3.mouse(this)[0]+70) + "px")
.style("top", (d3.mouse(this)[1]) + "px")
}
var mouseleave = function(d) {
tooltip.style("opacity", 0)
}
// add the squares
svg.selectAll()
.data(data, function(d) {return d.group+':'+d.variable;})
.enter()
.append("rect")
.attr("x", function(d) { return x(d.group) })
.attr("y", function(d) { return y(d.variable) })
.attr("width", x.bandwidth() )
.attr("height", y.bandwidth() )
.style("fill", function(d) { return myColor(d.value)} )
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseleave", mouseleave)
})<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>如您所见，该工具提示将显示在SVG下方，正如您在问题中所描述的(如果您单击整页" ，则可以更好地看到它).
As you can see, the tooltip shows up below the SVG, just as you describe in your question (you can better see it if you click "full page").
因此，您在该示例中缺少第三个组件: CSS！
Therefore, you're missing the third component in that example: the CSS!
您可以根据需要设置工具提示的样式，但这是CSS中用于定位工具提示的基本信息，给出了该链接中的代码:
You can style the tooltip the way you want, but this is the fundamental information in the CSS for positioning the tooltip, given the code in that link:
.tooltip {
position: absolute;
}
以下是与CSS相同的代码段:
Here is the same snippet, with that CSS:
// set the dimensions and margins of the graph
var margin = {
top: 30,
right: 30,
bottom: 30,
left: 30
},
width = 450 - margin.left - margin.right,
height = 450 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Labels of row and columns
var myGroups = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]
var myVars = ["v1", "v2", "v3", "v4", "v5", "v6", "v7", "v8", "v9", "v10"]
// Build X scales and axis:
var x = d3.scaleBand()
.range([0, width])
.domain(myGroups)
.padding(0.01);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
// Build X scales and axis:
var y = d3.scaleBand()
.range([height, 0])
.domain(myVars)
.padding(0.01);
svg.append("g")
.call(d3.axisLeft(y));
// Build color scale
var myColor = d3.scaleLinear()
.range(["white", "#69b3a2"])
.domain([1, 100])
//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/heatmap_data.csv", function(data) {
// create a tooltip
var tooltip = d3.select("#my_dataviz")
.append("div")
.style("opacity", 0)
.attr("class", "tooltip")
.style("background-color", "white")
.style("border", "solid")
.style("border-width", "2px")
.style("border-radius", "5px")
.style("padding", "5px")
// Three function that change the tooltip when user hover / move / leave a cell
var mouseover = function(d) {
tooltip.style("opacity", 1)
}
var mousemove = function(d) {
tooltip
.html("The exact value of<br>this cell is: " + d.value)
.style("left", (d3.mouse(this)[0] + 70) + "px")
.style("top", (d3.mouse(this)[1]) + "px")
}
var mouseleave = function(d) {
tooltip.style("opacity", 0)
}
// add the squares
svg.selectAll()
.data(data, function(d) {
return d.group + ':' + d.variable;
})
.enter()
.append("rect")
.attr("x", function(d) {
return x(d.group)
})
.attr("y", function(d) {
return y(d.variable)
})
.attr("width", x.bandwidth())
.attr("height", y.bandwidth())
.style("fill", function(d) {
return myColor(d.value)
})
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseleave", mouseleave)
}).tooltip {
position: absolute;
}<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>如您所见，工具提示现在已正确放置.
As you can see, the tooltip is correctly positioned now.
最后，仅出于完整性考虑，这是该页面中工具提示的真实CSS(请注意 position ):
Finally, just for completeness, this is the real CSS of the tooltip in that page (pay attention to position):
.tooltip {
position: absolute;
z-index: $zindex-tooltip;
display: block;
margin: $tooltip-margin;
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
@include reset-text();
font-size: $tooltip-font-size;
// Allow breaking very long words so they don't overflow the tooltip's bounds
word-wrap: break-word;
opacity: 0;
&.show { opacity: $tooltip-opacity; }
.arrow {
position: absolute;
display: block;
width: $tooltip-arrow-width;
height: $tooltip-arrow-height;
&::before {
position: absolute;
content: "";
border-color: transparent;
border-style: solid;
}
}
}
这篇关于鼠标悬停定位工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
