在 D3 饼图中悬停图例时爆炸饼图答案

【问题标题】：exploding the pie slice on hovering the legend in D3 pie chart在 D3 饼图中悬停图例时爆炸饼图
【发布时间】：2015-02-17 23:12:48
【问题描述】：

我使用 D3.js 和图例创建了一个饼图来匹配饼图。

我能够在鼠标悬停和鼠标移出事件时炸开一个饼图。

当我将鼠标悬停在图例上时，我需要分解一个饼图并显示一个工具提示，其值对应于该饼图。

感谢任何实现这一目标的指针。

【问题讨论】：

标签： d3.js pie-chart

【解决方案1】：

给每个“切片”一些文字。给这个文本一个 ID 并将文本的 ID 的可见性设置为隐藏在 CSS 中。在鼠标悬停时（或当您想显示工具提示时）取下隐藏类，从而显示文本。

var slice = d3select(slice)
.append("text")
.attr("id", function(d,i)
{
return "text" + i;
}
.classed("hidden", true);

slice.on("mouseover" function(){
d3.select(this)
.classed("hidden", false);
}

.hidden{
visibility:hidden;
}

显然，这不适用于您的，因为我不会选择正确的元素。如果您提供 JSFiddle，那么也许我可以看看是否可以向您展示它的工作原理:)

【讨论】：

【解决方案2】：

这就是我在图例上悬停时实现饼图爆炸的方式

1) 在创建饼图切片时添加了一个属性“id”，其值与我显示为图例（标签）的值相匹配 2）在图例上的 mouseOver 功能上，我使用 var id= path[id='"+this.textContent+"']" 3) 使用 d3.select 使用我们在步骤 2 中获得的路径 4) 使用选择进行饼图的爆炸。

【讨论】：