Javascript 如何在D3甜甜圈图表中添加工具提示
我想在D3甜甜圈图表中添加工具提示。如何做到这一点？我还想在饼图中添加每个部分的百分比 这是我的代码：Javascript 如何在D3甜甜圈图表中添加工具提示,javascript,svg,d3.js,tooltip,donut-chart,Javascript,Svg,D3.js,Tooltip,Donut Chart,我想在D3甜甜圈图表中添加工具提示。如何做到这一点？我还想在饼图中添加每个部分的百分比 这是我的代码： <!DOCTYPE html> <meta charset="utf-8"> <style> body { font: 14px sans-serif; } svg { padding: 10px 0 0 10px; } .arc { stroke: #000; } .arc:hover{ stroke: yellow; } .pie:hov
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 14px sans-serif;
}
svg {
padding: 10px 0 0 10px;
}
.arc {
stroke: #000;
}
.arc:hover{
stroke: yellow;
}
.pie:hover {
fill: orangered ;
}
</style>
<body>
<div class = "InfoVis"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.text("a simple tooltip");
var radius = 144,
padding = 20;
var color = d3.scale.ordinal()
.range(["#00ffff", "#00ff00", "#ffbf00", "#fe2ec8", "#bdbdbd", "#3104b4", "#5882fa"]);
var arc = d3.svg.arc()
.outerRadius(radius)
.innerRadius(radius - 40);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.nutrifacts; });
d3.csv("data.csv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Cereal"; }));
data.forEach(function(d) {
d.nutri = color.domain().map(function(name) {
return {name: name, nutrifacts: +d[name]};
});
});
var legend = d3.select("body").append("svg")
.attr("class", "legend")
.attr("width", radius * 2)
.attr("height", radius * 2)
.selectAll("g")
.data(color.domain().slice().reverse())
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", 24)
.attr("y", 9)
.attr("dy", ".55em")
.text(function(d) { return d; });
var svg = d3.select("body").selectAll(".pie")
.data(data)
.enter().append("svg")
.attr("class", "pie")
.attr("width", radius * 2)
.attr("height", radius * 2)
.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")");
svg.selectAll(".arc")
.data(function(d) { return pie(d.nutri); })
.enter().append("path")
.attr("class", "arc")
.attr("d", arc)
.style("fill", function(d) { return color(d.data.name); });
svg.append("text")
.attr("dy", ".35em")
.style("text-anchor", "middle")
.text(function(d) { return d.Cereal; });
});
</script>
身体{
字体：14px无衬线；
}
svg{
填充：10px 0 10px；
}
.arc{
行程：#000；
}
.弧线：悬停{
笔画：黄色；
}
.馅饼：悬停{
填充：橙色；
}
变量工具提示=d3。选择（“主体”）
.附加（“div”）
.style（“位置”、“绝对”）
.风格（“z指数”、“10”）
.style（“可见性”、“隐藏”）
.text（“简单的工具提示”）；
var半径=144，
填充=20；
var color=d3.scale.ordinal（）
.范围（[“#00ffff”、“#00ff00”、“#ffb00”、“#fe2ec8”、“#bdbdbd”、“#3104b4”、“#5882fa”）；
var arc=d3.svg.arc（）
.外部（半径）
.内半径（半径-40）；
var pie=d3.layout.pie（）
.sort（空）
.value（函数（d）{返回d.nutrifacts；}）；
d3.csv（“data.csv”，函数（错误，数据）{
color.domain（d3.keys（数据[0]）.filter（函数（键）{returnkey！==“谷物”}）；
data.forEach（函数（d）{
d、 nutri=color.domain（）.map（函数（名称）{
返回{name:name，nutrifacts:+d[name]}；
});
});
变量图例=d3.选择（“主体”）.追加（“svg”）
.attr（“类”、“图例”）
.attr（“宽度”，半径*2）
.attr（“高度”，半径*2）
.全选（“g”）
.data（color.domain（）.slice（）.reverse（））
.enter（）.append（“g”）
.attr（“transform”，函数（d，i）{return“translate（0，+i*20+”）；}）；
图例。追加（“rect”）
.attr（“宽度”，18）
.attr（“高度”，18）
.样式（“填充”，颜色）；
图例。追加（“文本”）
.attr（“x”，24）
.attr（“y”，9）
.attr（“dy”，“.55em”）
.text（函数（d）{return d；}）；
var svg=d3。选择（“主体”）。选择全部（“饼”）
.数据（数据）
.enter（）.append（“svg”）
.attr（“类”、“派”）
.attr（“宽度”，半径*2）
.attr（“高度”，半径*2）
.附加（“g”）
.attr（“变换”、“平移”（“+radius+”，“+radius+”））；
svg.selectAll（“.arc”）
.data（函数（d）{return pie（d.nutri）；}）
.enter（）.append（“路径”）
.attr（“类”、“弧”）
.attr（“d”，弧）
.style（“fill”，函数（d）{返回颜色（d.data.name）；}）；
svg.append（“文本”）
.attr（“dy”，“.35em”）
.style（“文本锚定”、“中间”）
.text（函数（d）{返回d.text；}）；
});
请帮助我在此代码中添加工具提示，如果可能，请为工具提示添加颜色。我知道您的问题，但您没有提供data.csv文件。所以我用自己的数据绘制了带有工具提示的甜甜圈图表。但是，您正在使用D3提供的预定义工具提示
var data = [{"age":"1-5","population":2000},
{"age":"6-10","population":1000},
{"age":"11-15","population":3000},
{"age":"16-20","population":1200},
{"age":"21-25","population":900},{"age":"26-30","population":1500},
{"age":"31-35","population":600},{"age":"36-40","population":1200},
{"age":"41-45","population":900}];
var margin = {top:40,left:40,right:40,bottom:40};
width = 650;
height = 650;
radius = Math.min(width-100,height-100)/2;
var color = d3.scale.ordinal()
.range(["#e53517","#6b486b","#ffbb78","#7ab51d","#6b486b",
"#e53517","#7ab51d","#ff7f0e","#ffc400"]);
var arc = d3.svg.arc()
.outerRadius(radius -130)
.innerRadius(radius - 10);
var arcOver = d3.svg.arc()
.outerRadius(radius +50)
.innerRadius(0);
var svg = d3.select("#svgContent").append("svg")
.attr("width",width)
.attr("height",height)
.append("g")
.attr("transform","translate("+width/2+","+height/2+")");
div = d3.select("body")
.append("div")
.attr("class", "tooltip");
var pie = d3.layout.pie()
.sort(null)
.value(function(d){return d.population;});
var g = svg.selectAll(".arc")
.data(pie(data))
.enter()
.append("g")
.attr("class","arc")
.on("mousemove",function(d){
var mouseVal = d3.mouse(this);
div.style("display","none");
div
.html("age:"+d.data.age+"</br>"+"population:"+d.data.population)
.style("left", (d3.event.pageX+12) + "px")
.style("top", (d3.event.pageY-10) + "px")
.style("opacity", 1)
.style("display","block");
})
.on("mouseout",function(){div.html(" ").style("display","none");})
.on("click",function(d){
if(d3.select(this).attr("transform") == null){
d3.select(this).attr("transform","translate(42,0)");
}else{
d3.select(this).attr("transform",null);
}
});
g.append("path")
.attr("d",arc)
.style("fill",function(d){return color(d.data.age);});
svg.selectAll("text").data(pie(data)).enter()
.append("text")
.attr("class","label1")
.attr("transform", function(d) {
var dist=radius+15;
var winkel=(d.startAngle+d.endAngle)/2;
var x=dist*Math.sin(winkel)-4;
var y=-dist*Math.cos(winkel)-4;
return "translate(" + x + "," + y + ")";
})
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.text(function(d){
return d.value;
});
var数据=[{“年龄”：“1-5”，“人口”：2000}，
{“年龄”：“6-10岁”，“人口”：1000}，
{“年龄”：“11-15”，“人口”：3000}，
{“年龄”：“16-20”，“人口”：1200}，
{“年龄”：“21-25”，“人口”：900}，{“年龄”：“26-30”，“人口”：1500}，
{“年龄”：“31-35”，“人口”：600}，{“年龄”：“36-40”，“人口”：1200}，
{“年龄”：“41-45”，“人口：900}]；
var-margin={top:40，left:40，right:40，bottom:40}；
宽度=650；
高度=650；
半径=数学最小值（宽度-100，高度-100）/2；
var color=d3.scale.ordinal（）
.范围（[“e53517”、“6b486b”、“ffbb78”、“7ab51d”、“6b486b”，
“e53517”、“7ab51d”、“ff7f0e”、“ffc400”）；
var arc=d3.svg.arc（）
.外层（半径-130）
.内半径（半径-10）；
var arcOver=d3.svg.arc（）
.外部（半径+50）
.内半径（0）；
var svg=d3.选择（#svgContent”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
div=d3。选择（“主体”）
.附加（“div”）
.attr（“类”、“工具提示”）；
var pie=d3.layout.pie（）
.sort（空）
.value（函数（d）{返回d.population；}）；
var g=svg.selectAll（“.arc”）
.数据（pie（数据））
.输入（）
.附加（“g”）
.attr（“类”、“弧”）
.on（“mousemove”，函数（d）{
var mouseVal=d3.mouse（this）；
分区样式（“显示”、“无”）；
div
.html（“年龄：+d.data.age+”“+”人口：+d.data.population）
.style（“左”（d3.event.pageX+12）+“px”）
.样式（“顶部”（d3.event.pageY-10）+“px”）
.style（“不透明度”，1）
.样式（“显示”、“块”）；
})
.on（“mouseout”，function（）{div.html（“”.style（“display”，“none”）；}）
.打开（“单击”，功能（d）{
if（d3.select（this.attr（“transform”）==null）{
d3.选择（this）.attr（“transform”，“translate（42,0）”）；
}否则{
d3.选择（this）.attr（“转换”，null）；
}
});
g、 附加（“路径”）
.attr（“d”，弧）
.style（“fill”，函数（d）{返回颜色（d.data.age）；}）；
svg.selectAll（“text”）.data（饼图（数据））.enter（）
.append（“文本”）
.attr（“类别”、“标签1”）
.attr（“转换”，函数（d）{
var dist=半径+15；
var winkel=（d.startAngle+d.endAngle）/2；
var x=距离*数学sin（winkel）-4；
变量y=-dist*Math.cos（winkel）-4；
返回“translate”（“+x+”，“+y+”）；
})
.attr（“dy”，“0.35em”）
.attr（“文本锚定”、“中间”）
.文本（功能（d）{
返回d值；
});
我添加了动画截图，以便人们看到你的作品。回答得很好！