在圆圈的鼠标悬停时显示数据
在圆圈的鼠标悬停时显示数据
提问于 2012-05-30 03:09:20
我有一组数据，我正在绘制散点图。当我将鼠标放在其中一个圆圈上时，我希望它弹出数据(比如x，y值，也许更多)。下面是我尝试使用的方法：
vis.selectAll("circle")
.data(datafiltered).enter().append("svg:circle")
.attr("cx", function(d) { return x(d.x);})
.attr("cy", function(d) {return y(d.y)})
.attr("fill", "red").attr("r", 15)
.on("mouseover", function() {
d3.select(this).enter().append("text")
.text(function(d) {return d.x;})
.attr("x", function(d) {return x(d.x);})
.attr("y", function (d) {return y(d.y);}); });我怀疑我需要提供更多关于输入哪些数据的信息？
回答 5
Stack Overflow用户
回答已采纳
发布于 2012-05-30 04:25:53
我假设你想要的是一个工具提示。最简单的方法是在每个圆上附加一个svg:title元素，因为浏览器将负责显示工具提示，而您不需要鼠标处理程序。代码应该是这样的
vis.selectAll("circle")
.data(datafiltered).enter().append("svg:circle")
...
.append("svg:title")
.text(function(d) { return d.x; });如果你想要更花哨的工具提示，你可以使用tipsy。有关示例，请参阅here。
Stack Overflow用户
发布于 2013-05-28 05:27:42
这里描述了一种制作工具提示的非常好的方法：Simple D3 tooltip example
您必须附加一个div
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.text("a simple tooltip");然后，您可以使用以下命令来切换它
.on("mouseover", function(){return tooltip.style("visibility", "visible");})
.on("mousemove", function(){return tooltip.style("top",
(d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");})
.on("mouseout", function(){return tooltip.style("visibility", "hidden");});d3.event.pageX / d3.event.pageY是当前鼠标坐标。
如果想要更改文本，可以使用tooltip.text("my tooltip text");
工作示例
<script src="https://d3js.org/d3.v7.min.js"></script>
<body>
<div class="example_div"></div>
</body>
<script type="text/javascript">
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.text("a simple tooltip");
var sampleSVG = d3.select(".example_div")
.append("svg:svg")
.attr("class", "sample")
.attr("width", 300)
.attr("height", 300);
d3.select(".example_div svg")
.append("svg:circle")
.attr("stroke", "black")
.attr("fill", "aliceblue")
.attr("r", 50)
.attr("cx", 52)
.attr("cy", 52)
.on("mouseover", function(){return tooltip.style("visibility", "visible");})
.on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
.on("mouseout", function(){return tooltip.style("visibility", "hidden");});
</script>
Stack Overflow用户
发布于 2014-08-01 08:47:36
我最近发现了一个很棒的库，可以做到这一点。它使用起来很简单，结果也相当整洁: d3-tip。
您可以看到一个示例here
基本上，您所要做的就是下载(index.js)，包括脚本：
<script src="index.js"></script>然后按照here中的说明进行操作(链接与示例相同)
但是对于你的代码来说，应该是这样的：
定义方法：
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>";
})创建您的svg (就像您已经做的那样)
var svg = ...调用该方法：
svg.call(tip);向您的对象添加提示：
vis.selectAll("circle")
.data(datafiltered).enter().append("svg:circle")
...
.on('mouseover', tip.show)
.on('mouseout', tip.hide)别忘了添加CSS：
<style>
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
</style>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10805184
复制相关文章
相似问题