我有一组数据,我正在绘制散点图。当我将鼠标放在其中一个圆圈上时,我希望它弹出数据(比如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);}); });
我怀疑我需要提供更多关于输入哪些数据的信息?
发布于 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。
发布于 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>
发布于 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>
https://stackoverflow.com/questions/10805184
复制相似问题