这个圆图可以用d3.js制作吗

我想用d3.js进行数据可视化。 我想知道是否有可能做这样一个

---

数据如下所示：A（实际数字）：25%，B（目标数字）：32%

是！您可以使用d3饼图布局如下：

我假设您有一个数据集，如您在问题中所解释的：

data = [{
    "label": "Actual",
        "percent": 25
}, {
    "label": "Target",
        "percent": 75
}]

var-width=960，
高度=500，
半径=数学最小值（宽度、高度）/2；
var color=d3.scale.ordinal（）
.范围（[“橙色”、“灰色”）；
var actualrc=d3.svg.arc（）
.外层（半径-80）
.内半径（半径-10）；
var targetarc=d3.svg.arc（）
.外层（半径-80）
.内半径（半径-70）；
var labelarc=d3.svg.arc（）
.外部（半径+70）
.内半径（半径）；
var pie=d3.layout.pie（）
.sort（空）
.价值（功能（d）{
回报率d%；
});
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
数据=[{
“标签”：“实际”，
“百分比”：25
}, {
“标签”：“目标”，
“百分比”：75
}]
var g=svg.selectAll（“.arc”）
.数据（pie（数据））
.enter（）.append（“g”）
.attr（“类”、“弧”）；
g、 附加（“路径”）
.attr（“d”，函数（d）{
控制台日志（d）
如果（d.data.label==“实际”）{
控制台日志（“实际”）
返回实际值c（d）；
}否则{
console.log（“目标”）
返回目标c（d）；
}
})
.样式（“填充”，功能（d）{
返回颜色（d.数据.标签）；
});
g、 附加（“文本”）
.attr（“转换”，函数（d）{
返回“translate（“+labelarc.centroid（d）+”）；
})
.attr（“dy”，“.35em”）
.style（“文本锚定”、“中间”）
.样式（“填充”，功能（d）{
返回颜色（d.数据.标签）；
})
.文本（功能（d）{
返回d.data.percent+“%”；
});
正文{
字体：10px无衬线；
}
.弧形路径{
冲程：#fff；
}
正文{
字体大小：40px
}
您的示例缺少目标标记，不是吗？是的，跳过了它。。。不知道是否需要，毕竟这是额外的努力：）我只是想说清楚。从这个问题的质量来看，我不会花太多精力。至少你铺平了道路。嗨，西里尔，非常感谢你！看起来真的很棒，很抱歉问题不清楚，但我想做的是重叠两个甜甜圈图表。很抱歉，如果问题看起来不真诚，我只想简短一点。。我不会要求提供代码，但您能告诉我是否有可能在您制作的图表顶部做这样的标记（使用其他数据）？