Javascript D3.js版本3中的甜甜圈气泡图

我需要绘制气泡图，其中每个气泡都是一个甜甜圈图，如d3版本3中的下图所示。我能够实现一些东西，但不知道如何水平分布圆圈，因为我的小部件将是矩形的

另外，如何使甜甜圈像下图中的气泡。任何帮助都将不胜感激。谢谢

代码：

let colorCircles={
‘a’：‘#59bcf9’，
‘b’：‘faabab’，
“d”：“ffde85”
};
让工具提示=d3。选择（“主体”）
.附加（“div”）
.attr（“类”、“工具提示内部”）
.style（“位置”、“绝对”）
.样式（“最小宽度”、“12rem”）
.style（“可见性”、“隐藏”）
.风格（“颜色”，“#627386”）
.style（“填充”、“15px”）
.style（“笔划”、“#b8bfca”）
.style（“填充”、“无”）
.style（“笔划宽度”，1）
.style（“背景色”，“#fff”）
.样式（“边界半径”、“6px”）
.style（“文本对齐”、“居中”）
.文本（“”）；
让bubble=d3.layout.pack（）
.sort（空）
.尺寸（[宽度、直径]）
.填充（15）
.价值（功能（d）{
返回d[columnForRadius]；
});
让svg=d3.select（“body”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，直径）
.attr（“类”、“气泡”）；
让节点=bubble.nodes({
子项：数据集
}).过滤器（功能（d）{
返回！d.儿童；
});
让圆=svg。选择全部（“圆”）
.数据（节点）
.输入（）
.附加（“圆圈”）
.attr（“r”，函数（d）{
返回d.r；
})
.attr（“cx”，功能（d）{
返回d.x；
})
.attr（“cy”，函数（d）{
返回d.y-20；
})
.样式（“填充”，功能（d）{
返回颜色圈[d[columnForColors]]
})
.on（“鼠标悬停”，功能（d）{
工具提示。样式（“可见性”、“可见”）；
html（“”+d[columnForColors]+”：“+d[columnForText]+”
$”+d[columnForRadius]+”；
})
.on（“mousemove”，function（）{
返回工具提示.style（“top”、（d3.event.offsetY-10）+“px”）.style（“left”、（d3.event.offsetX+10）+“px”）；
})
//.on（“mouseout”，函数（）{
//返回工具提示样式（“可见性”、“隐藏”）；
// })
.attr（“类”、“节点”）；
圆。过渡（）
.持续时间（1000）
.attr（“r”，函数（d）{
返回d.r；
})
.each（'end'，function（）{
显示文本（）；
});
函数显示_text（）{
让text=svg
.selectAll（“.text”）
.数据（节点、功能（d）{
返回d[columnForText]；
});
text.enter（）.append（“文本”）
.attr（“类”、“图形文本”）
.attr（“x”，函数（d）{
返回d.x；
})
.attr（“y”，函数（d）{
返回d.y-20；
})
.attr（“dy”，“.2em”）
.attr（“填充”、“白色”）
.attr（“字体大小”，函数（d）{
返回d.r/5；
})
.attr（“文本锚定”、“中间”）
.文本（功能（d）{
控制台日志（d）
返回d[columnForText]。子字符串（0，d.r/3）；
});
text.enter（）.append（“文本”）
.attr（“类”、“图形文本”）
.attr（“x”，函数（d）{
返回d.x；
})
.attr（“y”，函数（d）{
返回d.y-20；
})
.attr（“dy”、“1.3em”）
.style（“文本锚定”、“中间”）
.文本（功能（d）{
返回“$”+d[columnForRadius]；
})
.attr（“字体大小”，函数（d）{
返回d.r/5；
})
.attr（“填充”、“白色”）；
}
函数hide_text（）{
让text=svg.selectAll（“.text”）.remove（）；
}
d3.select（self.frameElement）
.样式（“高度”，直径+px”）

变量数据集=[
{“名称”：“橄榄”，“计数”：4319，“类别”：“d”}，
{“名称”：“茶”，“计数”：4159，“类别”：“d”}，
{“名称”：“煮土豆”，“计数”：2074，“类别”：“a”}，
{“名称”：“牛奶”，“计数”：1894，“类别”：“a”}，
{“名称”：“鸡肉沙拉”，“计数”：1809，“类别”：“a”}，
{“名称”：“莴苣沙拉”，“计数”：1566，“类别”：“a”}，
{“名称”：“龙虾沙拉”，“计数”：1511，“类别”：“a”}，
{“名称”：“巧克力”，“计数”：1489，“类别”：“b”}
];
变量宽度=300，直径=300；
var columnForText='Name'，
columnForColors='Category'，
columnForRadius=“Count”；
我有一个简单的解决方案。我所做的是：

使用
d3.layout.pie
获取
圆弧
的
startAngles
和
endAngles
，并在
圆
上方创建
圆弧

给
圆圈
画一条笔划线，产生油炸圈饼图的效果

然后我只需调整
星形缠结
和
端角
，使所有
弧
从同一位置开始

这是小提琴：


let colorCircles={
‘a’：‘#59bcf9’，
‘b’：‘faabab’，
“d”：“ffde85”
};
让工具提示=d3。选择（“主体”）
.附加（“div”）
.attr（“类”、“工具提示内部”）
.style（“位置”、“绝对”）
.样式（“最小宽度”、“12rem”）
.style（“可见性”、“隐藏”）
.风格（“颜色”，“#627386”）
.style（“填充”、“15px”）
.style（“笔划”、“#b8bfca”）
.style（“填充”、“无”）
.style（“笔划宽度”，1）
.style（“背景色”，“#fff”）
.样式（“边界半径”、“6px”）
.style（“文本对齐”、“居中”）
.文本（“”）；
让bubble=d3.layout.pack（）
.sort（空）
.尺寸（[宽度、直径]）
.填充（15）
.价值（功能（d）{
返回d[columnForRadius]；
});
var pie=d3.layout.pie（）
.sort（空）
.价值（功能（d）{
返回d.计数；
});
var arc=d3.svg.arc（）
让svg=d3.select（“body”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，直径）
.attr（“类”、“气泡”）；
让节点=bubble.nodes({
子项：数据集
}).过滤器（功能（d）{
返回！d.儿童；
});
设g=svg.append（'g'）
让圆=g。选择全部（“圆”）
.数据（节点）
.输入（）
.附加（“圆圈”）
.attr（“r”，函数（d）{
返回d.r；
})
.attr（“cx”，功能（d）{
返回d.x；
})
.attr（“cy”，函数（d）{
返回d.y-20；
})
.样式（“填充”，功能（d）{
返回颜色圈[d[columnForColors]]
})
.attr（“类”、“节点”）
.on（“鼠标悬停”，功能（d）{
tooltip.style（“visib
var arc = d3.svg.arc()
  .innerRadius(radius)
  .outerRadius(radius);

.attr("d", function(d) {
    arc.innerRadius(d.r+5);
    arc.outerRadius(d.r);
    return arc(d);
})