D3.js 将D3甜甜圈图表的角度更改为180

我需要将我的甜甜圈图表制作成如下图所示的水平图>

这是我用于其他甜甜圈图表的代码

   var dataset = {
        hddrives: [total - value, value],
    };

    var width = 460,
        height = 300,
        radius = Math.min(width, height) / 2;

    var color = d3.scale.ordinal()
        .range([secondColor, mainColor]);


    var pie = d3.layout.pie()
        .sort(null);



    var arc = d3.svg.arc()
        .innerRadius(radius - 100)
        .outerRadius(radius - 70);

    var svg = d3.select(divName).append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    //Draw the Circle
    svg.append("circle")
        .attr("cx", 0)
        .attr("cy", 0)
        .attr("r", 65)
        .attr("fill", "#F6FBF3");

    var path = svg.selectAll("path")
        .data(pie(dataset.hddrives))
        .enter().append("path")
        .attr("class", "arc")
        .attr("fill", function (d, i) { return color(i); })
        .attr("d", arc);
    svg.append("text")
        .attr("dy", "0em")
        .style("text-anchor", "middle")
        .attr("class", "inside")
        .attr("font-size", "30px")
        .text(function (d) { return value; });
    svg.append("text")
        .attr("dy", "1.5em")
        .style("text-anchor", "middle")
        .attr("class", "data")
        .text(function (d) { return nomeGtin; });
}

---

我试着去摆弄attr值和arc值，但是没有成功，关于如何处理这个问题有什么想法吗？谢谢

这不是一个多纳圈图，它现在是一个堆叠条形图（带有一个条形图）。在这方面，

pie

和

arc

助手没有太大帮助，他们关心的是计算角度和圆形的东西；您现在正在处理矩形<代码>d3。堆栈可能会有所帮助，但可能是杀伤力过大。下面是一个我刚刚自己做的数学（即定位）的快速示例：

可变宽度=500，
高度=200，
w=300，
h=100；
var svg=d3.select（'body'）
.append（'svg'）
.attr（'width'，width）
.attr（'高度'），高度；
var总计=0，
l=0，
//伪随机数据
原始=d3.范围（5）.映射（函数（d）{
var v=数学随机性（）*10；
总+=v；
返回v；
}),
//计算百分比和累积位置
data=raw.map（函数（d）{
var rv={
v:d，
l:l，
p:d/总计
}
l+=rv.p；
返回rv；
});
//比例和颜色
var s=d3.scale.linear（）
.范围（[0，w]）
.domain（[0，1]），
c=d3.刻度.类别20（）；
svg.selectAll（'rect'）
.数据（数据）
.输入（）
.append（'rect'）
.attr（'x'，函数（d）{
返回s（d.l）+宽度/2-w/2；//基于累积的位置
})
.attr（'width'，函数（d）{
返回s（d.p）；//刻度宽度
})
.attr（'高度'，h）
.attr（'y'，高度/2-h/2）
.样式（“填充”，功能（d，i）{
返回c（i）；
})
.style（'笔划'，'白色'）
.style（'stroke-width'，'2px'）；

如果你想使用一个没有曲线的完全笔直的矩形，那么使用圆弧是行不通的-你最好使用

d3.stack

作为一个单一的堆叠条形图