在D3饼图中悬停图例时爆炸饼图片

Question

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

我可以在鼠标悬停和鼠标移出事件上爆炸饼图片。

当我将鼠标悬停在图例上时，我需要爆炸一个饼图并显示一个与饼图对应的值的工具提示。

任何指向实现这一点的人都表示赞赏。

Answer 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，那么也许我可以看看我是否可以告诉你它是否正常工作：）

Answer 2

这就是我在悬停在图例

上时实现饼图爆炸的方式

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