在圆圈上方的鼠标上显示数据
我有一组数据，我正在分散地绘制。当我将鼠标滑过其中一个圆圈时，我希望它弹出数据（比如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);}); });
我想我需要更多关于输入什么数据的信息？
共有3个答案
我最近发现了一个非常棒的图书馆。它使用起来很简单，效果也很好：d3提示。
您可以在此处看到一个示例：
基本上，您只需下载（index.js），包括以下脚本：
<script src="index.js"></script>
然后按照这里的说明（与示例相同的链接）
但是对于你的代码来说，它应该是这样的：
定义方法：
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>
这里介绍了制作工具提示的一种非常好的方法：简单的D3工具提示示例
你必须附加一个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。事件第三页。事件pageY是当前鼠标坐标。
如果要更改文本，可以使用工具提示。文本（“我的工具提示文本”）
<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>
我假设你想要的是一个工具提示。最简单的方法是在每个圆上附加一个svg： title元素，因为浏览器将负责显示工具提示，而您不需要鼠标处理程序。代码应该是这样的
vis.selectAll("circle")
.data(datafiltered).enter().append("svg:circle")
...
.append("svg:title")
.text(function(d) { return d.x; });
如果你想要更花哨的工具提示，你可以使用微醺为例。这里有一个例子。
-
问题内容： 我只想在鼠标单击后绘制圆圈。由于paintComponent方法调用了自身，因此首先绘制圆而无需单击。 问题答案： 您的代码存在一些问题： 你永远不会打电话 你只需要一个和 请注意，当您调整框架大小时，某些圆圈将消失，并且总体上以奇怪的方式表现。 我会将所有s 存储在用户单击的位置，然后在方法内部遍历该列表。这样您就可以通话，而圈子不会消失。 更改后的工作代码：
-
我是WPF的新手。 我想在Canvas上的鼠标移动事件上画一个圆圈。我已经编写了在画布上拖动它的逻辑。但是我想在鼠标点击我的画布时创建一个圆圈，它应该根据鼠标在画布上的移动来调整大小。 我怎样才能做到这一点？ 这是我的代码
-
我试着把第二个播放器放在一个有圆角的框架内（这个答案和这个答案），但是播放器总是会跳出父框架并绘制视频的完整矩形。 我发现这个解决方案使用GLSurfaceView，但是这个解决方案使用经典的MediaPlayer而不是ExoPlayer。
-
我想用鼠标在表格中的图像上显示工具提示。请找到小提琴样品http://jsfiddle.net/FpBu4/42/我想用鼠标在图像的右上方显示工具提示。下面是示例脚本： 请建议如何在图像上的鼠标上显示图像附近的工具提示。谢谢
-
问题内容： 因此，我试图绘制一个标签，其中包含一个显示圆圈的图标。圆圈最初将被填充为红色，然后根据我按下的三个按钮中的哪个按钮，将使用重绘将其更改为绿色，蓝色或红色。 这是我到目前为止的内容： 我的问题是，我不知道在paintIcon中如何传递Graphics g。有其他方法可以做到这一点吗？我对此表示感谢。 问题答案： 图标的大小为（10，10）。50，超出了Icon的范围。相对于图标完成绘制，
-
我在JavaFX中创建了一个小的绘画程序，并且有了一个圆形创建工具。目前，我可以正确地画圆，但与我的其他工具不同，我看不到正在创建的圆(即，当我拖动鼠标时)。只有当我松开鼠标时，我才能看到圆(以正确的尺寸绘制)。我试图在拖动时添加一个< code>strokeOval()方法，但是它创建了一个奇怪的“泪珠”状的圆。我什么都试过了，有人能帮忙吗？ 这是我的代码: 上面的代码正确创建了圆，但在我释放鼠