Javascript D3将两个甜甜圈图表叠加在一起。

我在寻找两个油炸圈饼图，或者至少是弧图。我想隐藏一个特定的弧，并在单击时显示另一个弧，然后在再次单击时恢复

我发现你可以简单地通过点击选择一个片段来隐藏一个弧，然后执行

d3.select（“弧”）.attr（“可见性”、“隐藏”）

所以我想隐藏一个切片，然后显示另一个。我希望圆弧占据相同的点，因此显示另一个似乎只会改变圆弧

谢谢,，
Brian
据我所知，您希望在单击时更新特定的弧。
因此，与其创建两个甜甜圈，一个接一个，只需创建一个甜甜圈图表，并在单击圆弧时更新它


$（文档）.ready（函数（）{
可变宽度=400，
高度=250，
半径=数学最小值（宽度、高度）/2；
var color=d3.scale.category20（）；
var pie=d3.layout.pie（）
.价值（功能（d）{
归还d.苹果；
})
.sort（空）；
var arc=d3.svg.arc（）
.内半径（半径-70）
.外层（半径-20）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
风险值数据=[{
“苹果”：53245，
“橙子”：200
}, {
“苹果”：28479，
“橙子”：200
}, {
“苹果”：19697，
“橙子”：200
}, {
“苹果”：24037，
“橙子”：200
}];
var path=svg.datum（数据）。选择全部（“路径”）
.数据（pie）
.enter（）.append（“路径”）
.attr（“填充”，函数（d，i）{
返回颜色（i）；
})
.attr（“d”，弧）
.每个功能（d）{
这是。_电流=d；
})//存储初始角度
.打开（“单击”，功能（d）{
var key=d.data.getKeyByValue（d.value）；
var oppKey=（key==“apples”）？“oranges”：“apples”；
更改（oppKey）；
});
功能更改（keyVal）{
var值=keyVal；
饼图值（函数（d）{
返回d[值]；
})；//更改值函数
path=path.data（饼图）；//计算新角度
path.transition（）.duration（750）.attrTween（“d”，arcTween）；//重新绘制圆弧
}
功能类型（d）{
d、 苹果=+d.苹果；
d、 橙子=+d.橙子；
返回d；
}
//将显示的角度存储在_current中。
//然后，从_current插值到新角度。
//在转换过程中，_电流通过d3.interpolate就地更新。
函数arcTween（a）{
var i=d3.内插（该电流为a）；
该电流=i（0）；
返回函数（t）{
返回弧（i（t））；
};
}
Object.prototype.getKeyByValue=函数（值）{
for（本文件中的var prop）{
如果（这个hasOwnProperty（prop））{
如果（此[prop]==值）
返回道具；
}
}
}
});