如何将D3环形图角度调整为180度并改为水平样式？

问题背景 #

你希望把现有D3环形图改成180度的水平半圆样式，但调整属性后未达到预期效果。下面是针对你现有代码的针对性修改方案：

核心修改思路 #

默认的d3.layout.pie()会渲染完整360度环形，要实现180度水平半圆，关键是给pie布局指定起始角度和结束角度，限制其渲染范围；同时微调容器定位和文本位置，让整体布局更贴合水平样式的视觉需求。

修改后的完整代码 #

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]);

// 关键修改：设置pie布局为180度水平半圆，从左侧（180度）顺时针渲染到右侧（0度）
var pie = d3.layout.pie()
    .sort(null)
    .startAngle(Math.PI)
    .endAngle(0);

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 + ")");

// 绘制中心圆
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", "-1em")
    .style("text-anchor", "middle")
    .attr("class", "inside")
    .attr("font-size", "30px")
    .text(function (d) { return value; });

svg.append("text")
    .attr("dy", "0.5em")
    .style("text-anchor", "middle")
    .attr("class", "data")
    .text(function (d) { return nomeGtin; });

细节说明 #

1. 角度参数调整：startAngle(Math.PI)和endAngle(0)会让环形图从左侧（180度位置）顺时针渲染到右侧（0度位置），形成向下开口的水平半圆。如果需要向上开口的样式，可将角度改为：

   .startAngle(-Math.PI/2)
   .endAngle(Math.PI/2)
   

2. 容器定位优化：把原来的垂直居中height/2改为height，让半圆的圆心落在容器底部中间，更符合水平半圆的视觉呈现。
3. 文本位置微调：修改dy属性让文本向上偏移，避免被半圆图形遮挡，保证内部文字清晰可见。

内容的提问来源于stack exchange，提问作者Daniel Bezerra De Menezes