Javascript D3JS更多活动网络图节点菜单

我想用D3JS做网络图，我已经准备好了有向力图。 但当网络更加复杂时，图形变得非常混乱。所以我环顾四周，发现了一些我想用d3js实现的东西。在主页上的这个图表是每个节点上的上下文菜单，子节点根据需要加载，并且可以在每个节点上显示另一个图表（工具提示）

我是d3js的初学者，因此我将非常感谢您给我一些如何实现它的建议

向节点添加上下文菜单

选择某个上下文菜单项时，显示另一个图形（如饼图）

如果可以按需加载daata（当用户单击父节点时）

如果你曾经看到过这样的想法（一些示例代码），请分享

谢谢你的建议

Edit1: 我为菜单准备了基础甜甜圈图表。我需要添加一些悬停动作和加载图标代替文本标签的图标名称在数据集中。如果有人能帮我，我会很高兴的。这个菜单可以帮助很多人。 Edit2：我更新了菜单图表，现在支持悬停效果。现在，它与力有向图结合使用。当有人点击节点时，饼图菜单显示

var数据集=[
{
尺寸：2，
标签：“项目1”
},
{
尺寸：1，
标签：“项目2”
},    
{
尺码：65，
标签：“项目3”
},    
{
尺码：45，
标签：“项目4”
},    
{
尺码：50，
标签：“项目5”
}
];
可变宽度=460，
高度=300，
半径=数学最小值（宽度、高度）/2；
var color=d3.scale.category20（）；
var pie=d3.layout.pie（）
.sort（空）
.value（函数（d）{返回对象.keys（数据集）.length；}）；//这是塞尔科沃人民的共同愿望——波切茨·普尔维克什夫（početz prvkův）
//菜单
//电弧设置
var arc=d3.svg.arc（）
.内半径（半径-100）
.外层（半径-50）；
//图空间
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
//准备图表和加载数据
var g=svg.selectAll（“.arc”）
.数据（饼图（数据集））
.enter（）.append（“g”）
.attr（“类”、“弧”）；
//添加颜色
var path=g.append（“路径”）
.attr（“d”，弧）
.attr（“fill”，函数（d）{返回颜色（d.data.size）；}）
//添加标签
var asdfd=g.append（“文本”）
.attr（“变换”，函数（d）{return“translate”（+arc.centroid（d）+”）；}）
.attr（“dy”，“.35em”）
.style（“文本锚定”、“中间”）
.text（函数（d）{return d.data.label；}）；
颜色；
//添加悬停动作
“鼠标指针”，函数（d，i）{
console.log（“mousein”+d.data.label）
var thisPath=d3。选择（此）；
oldColor=thisPath.attr（“fill”）；//保存旧颜色
这条路
.attr（“填充”、“蓝色”）
.attr（“光标”、“指针”）
.attr（“类”、“开”）；
})
路径开（“鼠标出”，函数（d）{
d3.选择（本）
.attr（“填充”，旧颜色）
.attr（“类”、“关”）；
});

经过一番辩论后，我投票结束了你的问题。你是，你是在以一种不会在事后对社区有益的方式提问。我将从一个简单的问题开始。为什么不使用ZoomCharts SDK，因为它提供了所有这些功能，而无需开发它。而且，它比d3快得多。简单地说，ToomCharts不是免费的。D3可以更快，当你选择画布和D3的要点时，你可以随心所欲。