使用 d3.js 向饼图添加工具提示
Posted
技术标签:
【中文标题】使用 d3.js 向饼图添加工具提示【英文标题】：adding tooltips to pie chart using d3.js 【发布时间】：2014-05-14 12:38:42 【问题描述】：我正在开始学习使用 d3.js 可视化数据的旅程，到目前为止，我发现 Scott Murray 的“交互式数据可视化”非常有用。我正在阅读本书第 11 章中的一些示例代码，并且想知道如何将工具提示添加到饼图中（本书已经使用条形图描述了此过程）。无论如何，过去几个小时一直在修改代码，想看看是否有人可以帮我解决这个问题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: Pie layout</title>
<script type="text/javascript" src="d3/d3.v3.js"></script>
<style type="text/css">
text
font-family: sans-serif;
font-size: 12px;
fill: white;
#tooltip
position: absolute;
width: 200px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-mox-box-shadow: 4px 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rbga(0, 0, 0, 0.4)
pointer-events: none;
#tooltip.hidden
display: none;
#tooltip p
margin: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
</style>
</head>
<body>
<div id="tooltip" class="hidden">
<p><strong>Important Label Heading</strong></p>
<p><span id="value">100</span>%</p>
</div>
<script type="text/javascript">
//Width and height
var w = 300;
var h = 300;
var dataset = [ 5, 10, 20, 45, 6, 25 ];
var outerRadius = w / 2;
var innerRadius = 0;
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
var pie = d3.layout.pie();
// Easy colors accessible via a 10-step ordinal scale
var color = d3.scale.category10();
// Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
// Set up groups
var arcs = svg.selectAll("g.arc")
.data(pie(dataset))
.enter()
.append("g")
.attr("class", "arc")
.attr("transform", "translate(" + outerRadius + "," + outerRadius + ")")
.on("mouseover", function(d)
d3.select("#tooltip")
.select("#value")
.text(d);
d3.select("tooltip").classed("hidden",false);
)
.on("mouseout", function()
// Hide the tooltip
d3.select("#tooltip").classed("hidden", true);
);
// Draw arc paths
arcs.append("path")
.attr("fill", function(d, i)
return color(i);
)
.attr("d", arc);
// Labels
arcs.append("text")
.attr("transform", function(d)
return "translate(" + arc.centroid(d) + ")";
)
.attr("text-anchor", "middle")
.text(function(d)
return d.value;
);
</script>
</body>
</html>
我知道这有点难以理解，但我想更具体地了解如何设置工具提示的 x 和 y 值。提前谢谢你。
【问题讨论】：
【参考方案1】：我更喜欢使用不透明度来显示/隐藏工具提示。这是FIDDLE。这应该能让你继续前进。
d3.select("#tooltip")
.style("left", d3.event.pageX + "px")
.style("top", d3.event.pageY + "px")
.style("opacity", 1)
.select("#value")
.text(d.value);
【讨论】：
正是我需要的，非常感谢。再次查看我的脚本，我还注意到我已经关闭了 css 部分中的指针事件 (pointer-events:none)。 感谢您的提琴 :) 我发现使用不透明度会在我的应用程序中导致一些故障行为 - 当工具提示不可见但仍位于图表的一部分上时，它会阻止mouseover 事件从射击。所以我更喜欢只使用.style("display", "block") 和.style("display", "none")
@Daniel，很有趣。作为参考，我使用您的方法创建了另一个FIDDLE。谢谢。
使用这种方法的用户体验不是很好，当它在同一个元素上时，工具提示div不会随着鼠标移动而移动。【参考方案2】：
我在 FernOfTheAndes 的回答中添加了鼠标移动事件，这将使它更漂亮的用例。希望这会有所帮助
.on("mouseover", function(d)
d3.select("#tooltip").style('opacity', 1)
.select("#value").text(d.value);
)
.on("mousemove", function(d)
d3.select("#tooltip").style("top", (d3.event.pageY - 10) + "px")
.style("left", (d3.event.pageX + 10) + "px");
)
.on("mouseout", function()
d3.select("#tooltip").style('opacity', 0);
);
【讨论】：
以上是关于使用 d3.js 向饼图添加工具提示的主要内容，如果未能解决你的问题，请参考以下文章