在圆形的鼠标悬停上显示数据

我有一组数据，我正在分散绘制。 当我将鼠标悬停在其中一个圆圈上时，我希望它弹出数据（如x，y值，也许更多）。 这是我尝试使用的：

vis.selectAll("circle") .data(datafiltered).enter().append("svg:circle") .attr("cx", function(d) { return x(dx);}) .attr("cy", function(d) {return y(dy)}) .attr("fill", "red").attr("r", 15) .on("mouseover", function() { d3.select(this).enter().append("text") .text(function(d) {return dx;}) .attr("x", function(d) {return x(dx);}) .attr("y", function (d) {return y(dy);}); }); 

我怀疑我需要更多的信息来输入什么数据？

Answer 1

我假设你想要的是一个工具提示。 最简单的方法是将一个svg:title元素添加到每个圆圈，因为浏览器将显示工具提示，并且不需要鼠标手柄。 代码会是这样的

 vis.selectAll("circle") .data(datafiltered).enter().append("svg:circle") ... .append("svg:title") .text(function(d) { return dx; }); 

如果你想要更好的工具提示，你可以使用例如。 看这里的例子。

Answer 2

这里描述了一个真正的提示工具提示的方法： 简单的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.event.pageX / d3.event.pageY是当前的鼠标坐标。

如果你想改变文本，你可以使用tooltip.text("my tooltip text");

工作示例

Answer 3

有一个很棒的图书馆，这是我最近发现的。 使用起来很简单，结果非常简洁：d3-tip。

你可以在这里看到一个例子：

基本上，你所要做的就是下载（ 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> 

Answer 4

你可以像这样传入要用于鼠标悬停的数据 – mouseover事件使用一个函数，你以前enter数据作为参数（而索引作为第二个参数），所以你不需要使用enter()第二次。

 vis.selectAll("circle") .data(datafiltered).enter().append("svg:circle") .attr("cx", function(d) { return x(dx);}) .attr("cy", function(d) {return y(dy)}) .attr("fill", "red").attr("r", 15) .on("mouseover", function(d,i) { d3.select(this).append("text") .text( dx) .attr("x", x(dx)) .attr("y", y(dy)); }); 

Answer 5

这个简洁的例子演示了如何在d3中创建自定义工具提示的常用方法。

 var w = 500; var h = 150; var dataset = [5, 10, 15, 20, 25]; // firstly we create div element that we can use as // tooltip container, it have absolute position and // visibility: hidden by default var tooltip = d3.select("body") .append("div") .attr('class', 'tooltip'); var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); // here we add some circles on the page var circles = svg.selectAll("circle") .data(dataset) .enter() .append("circle"); circles.attr("cx", function(d, i) { return (i * 50) + 25; }) .attr("cy", h / 2) .attr("r", function(d) { return d; }) // we define "mouseover" handler, here we change tooltip // visibility to "visible" and add appropriate test .on("mouseover", function(d) { return tooltip.style("visibility", "visible").text('radius = ' + d); }) // we move tooltip during of "mousemove" .on("mousemove", function() { return tooltip.style("top", (event.pageY - 30) + "px") .style("left", event.pageX + "px"); }) // we hide our tooltip on "mouseout" .on("mouseout", function() { return tooltip.style("visibility", "hidden"); }); 

 .tooltip { position: absolute; z-index: 10; visibility: hidden; background-color: lightblue; text-align: center; padding: 4px; border-radius: 4px; font-weight: bold; color: orange; } 

 <script src="ajax/libs/d3/4.11.0/d3.min.js"></script>