Javascript d3js-添加类似于语音气泡的工具提示？
我试图在d3js中的散点图中添加我认为是基本的工具提示，并想知道最简单的方法。现在，当您将鼠标悬停在圆上时，x和y坐标将显示在文本中。我希望这些都能出现在一个演讲泡泡中，接近主题本身。差不多。语音泡泡不必看起来像那样，但我希望它位于点附近，指向相关的圆圈 以下是主要代码：Javascript d3js-添加类似于语音气泡的工具提示？,javascript,d3.js,tooltip,Javascript,D3.js,Tooltip,我试图在d3js中的散点图中添加我认为是基本的工具提示，并想知道最简单的方法。现在，当您将鼠标悬停在圆上时，x和y坐标将显示在文本中。我希望这些都能出现在一个演讲泡泡中，接近主题本身。差不多。语音泡泡不必看起来像那样，但我希望它位于点附近，指向相关的圆圈 以下是主要代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <ti
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: Adjusted radii</title>
<script type="text/javascript" src="../d3/d3.v3.js"></script>
<style type="text/css">
/* No style rules here yet */
</style>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 500;
var h = 100;
var padding = 20;
var dataset = [
[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
[410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
];
//Create scale functions
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[0]; })])
.range([padding, w - padding * 2]);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([h - padding, padding]);
var rScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([2, 5]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
})
.attr("r", function(d) {
return rScale(d[1]);
});
// svg.selectAll("text")
// .data(dataset)
// .enter()
// .append("text")
// .text(function(d) {
// return d[0] + "," + d[1];
// })
// .attr("x", function(d) {
// return xScale(d[0]);
// })
// .attr("y", function(d) {
// return yScale(d[1]);
// })
// .attr("font-family", "sans-serif")
// .attr("font-size", "11px")
// .attr("fill", "red");
svg.selectAll("circle").on("mouseover", function(d) {
//Get this bar's x/y values, then augment for the tooltip
var xPosition = parseFloat(d3.select(this).attr("cx")) ;
var yPosition = parseFloat(d3.select(this).attr("cy")) ;
//Create the tooltip label
svg.append("text")
.attr("id", "tooltip")
.attr("x", .2*w)
.attr("y", .2*h)
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("font-weight", "bold")
.attr("fill", "black")
.text("x = "+d3.round(xPosition,2)+",y = "+d3.round(yPosition,2));
svg.selectAll("circle").on("mouseout", function(d) {
//Remove the tooltip
d3.select("#tooltip").remove();
})
})
</script>
</body>
</html>
D3：调整半径
/*这里还没有样式规则*/
//宽度和高度
var w=500；
var h=100；
var=20；
变量数据集=[
[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
[410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
];
//创建比例函数
var xScale=d3.scale.linear（）
.domain（[0，d3.max（数据集，函数（d）{返回d[0]；}）]）
.范围（[填充，w-填充*2]）；
var yScale=d3.scale.linear（）
.domain（[0，d3.max（数据集，函数（d）{返回d[1]；}）]）
.范围（[h-填充，填充]）；
var rScale=d3.scale.linear（）
.domain（[0，d3.max（数据集，函数（d）{返回d[1]；}）]）
.范围（[2,5]）；
//创建SVG元素
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
svg.selectAll（“圆圈”）
.数据（数据集）
.输入（）
.附加（“圆圈”）
.attr（“cx”，功能（d）{
返回xScale（d[0]）；
})
.attr（“cy”，函数（d）{
返回yScale（d[1]）；
})
.attr（“r”，函数（d）{
返回rScale（d[1]）；
});
//svg.selectAll（“文本”）
//.数据（数据集）
//.输入（）
//.append（“文本”）
//.文本（功能（d）{
//返回d[0]+“，”+d[1]；
// })
//.attr（“x”，函数（d）{
//返回xScale（d[0]）；
// })
//.attr（“y”，函数（d）{
//返回yScale（d[1]）；
// })
//.attr（“字体系列”、“无衬线”）
//.attr（“字体大小”，“11px”）
//.attr（“填充”、“红色”）；
svg.selectAll（“圆圈”）。打开（“鼠标悬停”，功能（d）{
//获取此栏的x/y值，然后为工具提示进行增强
var xPosition=parseFloat（d3.select（this.attr）（“cx”）；
var yPosition=parseFloat（d3.select（this.attr）（“cy”）；
//创建工具提示标签
svg.append（“文本”）
.attr（“id”、“工具提示”）
.attr（“x”，.2*w）
.attr（“y”，.2*h）
.attr（“文本锚定”、“中间”）
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，“11px”）
.attr（“字体大小”、“粗体”）
.attr（“填充”、“黑色”）
.text（“x=“+d3.round（xPosition，2）+”，y=“+d3.round（yPosition，2））；
svg.selectAll（“圆圈”）。打开（“鼠标输出”，函数（d）{
//删除工具提示
d3.选择（“#工具提示”）.remove（）；
})
})
谢谢 一个真正好的起点是看 如果你想玩你自己的，那么请随意，你可以以此为指导。如果您乐于使用D3技巧，那么就可以简单地执行以下操作（摘自Github网站）：
不只是创建文本元素，而是创建一个包含椭圆、多边形和文本元素的组元素。显示时，这些组合将看起来像一个语音气泡
//Create the tooltip label
var tooltipG = svg.append("g")
.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
tooltipG.append("polygon")
.attr("points", "0,0 0,-50, 50,-50")
.style("fill", "grey");
tooltipG.append("ellipse")
.attr("cx", 0)
.attr("cy", -75)
.attr("rx", 100)
.attr("ry", 50)
.style("fill", "grey")
tooltipG.append("text")
.attr("dy", -75)
.text(("x = "+d3.round(xPosition,2)+",y = "+d3.round(yPosition,2));
//Create the tooltip label
var tooltipG = svg.append("g")
.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
tooltipG.append("polygon")
.attr("points", "0,0 0,-50, 50,-50")
.style("fill", "grey");
tooltipG.append("ellipse")
.attr("cx", 0)
.attr("cy", -75)
.attr("rx", 100)
.attr("ry", 50)
.style("fill", "grey")
tooltipG.append("text")
.attr("dy", -75)
.text(("x = "+d3.round(xPosition,2)+",y = "+d3.round(yPosition,2));