Javascript 在D3.js饼图上显示标签

我试图用以下代码在简单的D3.js饼图上显示标签：

HTML:

JS:

（功能（d3）{
var last_login_today=；
var last_login_before_today=；
"严格使用",；
变量数据集=[
{label:'今天登录'，count:last_login_Today}，
{标签：“今天之前登录”，计数：今天之前的最后一次登录}
];
var宽度=360；
var高度=360；
变量半径=数学最小值（宽度、高度）/2；
var color=d3.scale.category20b（）；
var svg=d3。选择（“#图表”）
.append（'svg'）
.attr（'width'，width）
.attr（'height'，height）
.append（'g'）
.attr（'transform'，'translate（+（宽度/2）+
",；
var arc=d3.svg.arc（）
.外层（半径）；
var pie=d3.layout.pie（）
.value（函数（d）{返回d.count；}）
.sort（空）；
var path=svg.selectAll（'path'）
.数据（饼图（数据集））
.输入（）
.append（'路径'）
.attr（'d'，弧）
.attr（'fill'，函数（d，i）{
返回颜色（d.数据.标签）；
});
})（窗口d3）；

---

图表本身正在正确填充，但“今天登录”和“今天之前登录”标签未显示。

我将从这开始，由于字符串长度未知，在动态执行这些操作时，PIE上的标签很麻烦

我用这个来找到角度点，这样我可以把它放在左/右位置

            function midAngle(d) {
                return d.startAngle + ((d.endAngle - d.startAngle) / 2);
            }

你需要这个

                var labels = svg.append("g")
                                .attr("class", "labels")
                                .selectAll("text")
                                    .data(pie(dataset))
                                    .enter()
                                    .append("text")
                                        .attr("transform", function (d) {
                                            this._current = this._current || d;
                                            var interpolate = d3.interpolate(this._current, d);
                                            var d2 = interpolate(0);
                                            var pos = arc.centroid(d2);
                                            pos[0] = radius * (midAngle(d2) < Math.PI ? 1.2 : -1.2));
                                            return "translate(" + pos + ")";
                                        })
                                        .attr("dy", ".35em")
                                        .style("text-anchor", "end")
                                        .text(function (d) {
                                            return d.data.Label;
                                        });

var labels=svg.append（“g”）
.attr（“类别”、“标签”）
.selectAll（“文本”）
.数据（饼图（数据集））
.输入（）
.append（“文本”）
.attr（“转换”，函数（d）{
这个。|电流=这个。|电流| d；
var interpolate=d3.interpolate（该电流，d）；
var d2=插值（0）；
var pos=弧形心（d2）；
位置[0]=半径*（中间角（d2）

首先，由于未知的字符串长度，在动态执行这些操作时，馅饼上的标签很麻烦

我用这个来找到角度点，这样我可以把它放在左/右位置

            function midAngle(d) {
                return d.startAngle + ((d.endAngle - d.startAngle) / 2);
            }

你需要这个

                var labels = svg.append("g")
                                .attr("class", "labels")
                                .selectAll("text")
                                    .data(pie(dataset))
                                    .enter()
                                    .append("text")
                                        .attr("transform", function (d) {
                                            this._current = this._current || d;
                                            var interpolate = d3.interpolate(this._current, d);
                                            var d2 = interpolate(0);
                                            var pos = arc.centroid(d2);
                                            pos[0] = radius * (midAngle(d2) < Math.PI ? 1.2 : -1.2));
                                            return "translate(" + pos + ")";
                                        })
                                        .attr("dy", ".35em")
                                        .style("text-anchor", "end")
                                        .text(function (d) {
                                            return d.data.Label;
                                        });

var labels=svg.append（“g”）
.attr（“类别”、“标签”）
.selectAll（“文本”）
.数据（饼图（数据集））
.输入（）
.append（“文本”）
.attr（“转换”，函数（d）{
这个。|电流=这个。|电流| d；
var interpolate=d3.interpolate（该电流，d）；
var d2=插值（0）；
var pos=弧形心（d2）；
位置[0]=半径*（中间角（d2）

您似乎没有在代码中添加任何标签。您似乎没有在代码中添加任何标签。