D3.js圆环图标签获取多三角形而不是多段线

我一直在使用D3.js创建一个甜甜圈图表。我一直在遵循列出的示例。在我到达关于从甜甜圈切片到文本标签绘制的多段线的部分之前，一切都很顺利。我准确地复制了示例代码，而在他们的示例中，他们得到了漂亮的线条，我得到了三角形，如图所示

所以，除了它不能正常工作之外，我必须承认我并不真正理解代码中的折线部分。这使得我甚至不知道从哪里开始寻找问题的原因。下面是我的项目中的多段线图形代码。任何帮助或见解都将不胜感激

var polyline = chart.select(".lines").selectAll("polyline")
                        .data(pie(data), key);

                    polyline.enter()
                        .append("polyline");

                    polyline.transition().duration(1000)
                        .attrTween("points", function(d){
                            this._current = this._current || d;
                            var interpolate = d3.interpolate(this._current, d);
                            this._current = interpolate(0);
                            return function(t) {
                                var d2 = interpolate(t);
                                var pos = outerArc.centroid(d2);
                                pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
                                return [arc.centroid(d2), outerArc.centroid(d2), pos];
                            };          
                        });

                    polyline.exit().remove();

var polyline=图表。选择（“.line”）。选择全部（“polyline”）
.数据（饼图（数据），键）；
多段线。输入（）
.附加（“多段线”）；
polyline.transition（）.持续时间（1000）
.attrTween（“点”，函数（d）{
这个。|电流=这个。|电流| d；
var interpolate=d3.interpolate（该电流，d）；
该值为._电流=插值（0）；
返回函数（t）{
var d2=插值（t）；
var pos=外表面质心（d2）；
位置[0]=半径*0.95*（中间角（d2）

编辑

---

所以，像往常一样，当我屈服并提出这个问题时，我发现了问题所在。在我链接到的示例中，他们使用样式表将fill属性设置为none。虽然这是可行的，但我宁愿它留在D3代码中。对于任何感兴趣的人来说，这就是代码的样子

var polyline = chart.select(".lines").selectAll("polyline")
                        .data(pie(data), key);

                    polyline.enter()
                        .append("polyline")
                        .style("fill", "none")
                        .style("stroke-width", "2px")
                        .style("stroke", "black")
                        .style("opacity", "0.4");

                    polyline.transition().duration(500)
                        .attrTween("points", function(d){
                            this._current = this._current || d;
                            var interpolate = d3.interpolate(this._current, d);
                            this._current = interpolate(0);
                            return function(t) {
                                var d2 = interpolate(t);
                                var pos = outerArc.centroid(d2);
                                pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
                                return [arc.centroid(d2), outerArc.centroid(d2), pos];
                            };          
                        });

                    polyline.exit().remove();

var polyline = chart.select(".lines").selectAll("polyline")
                        .data(pie(data), key);

                    polyline.enter()
                        .append("polyline")
                        .style("fill", "none")
                        .style("stroke-width", "2px")
                        .style("stroke", "black")
                        .style("opacity", "0.4");

                    polyline.transition().duration(500)
                        .attrTween("points", function(d){
                            this._current = this._current || d;
                            var interpolate = d3.interpolate(this._current, d);
                            this._current = interpolate(0);
                            return function(t) {
                                var d2 = interpolate(t);
                                var pos = outerArc.centroid(d2);
                                pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
                                return [arc.centroid(d2), outerArc.centroid(d2), pos];
                            };          
                        });

                    polyline.exit().remove();

var polyline=图表。选择（“.line”）。选择全部（“polyline”）
.数据（饼图（数据），键）；
多段线。输入（）
.append（“多段线”）
.style（“填充”、“无”）
.style（“笔划宽度”、“2px”）
.style（“笔划”、“黑色”）
.样式（“不透明度”、“0.4”）；
polyline.transition（）.持续时间（500）
.attrTween（“点”，函数（d）{
这个。|电流=这个。|电流| d；
var interpolate=d3.interpolate（该电流，d）；
该值为._电流=插值（0）；
返回函数（t）{
var d2=插值（t）；
var pos=外表面质心（d2）；
位置[0]=半径*0.95*（中间角（d2）

所以，像往常一样，一旦我屈服并问了这个问题，我就发现了问题所在。在我链接到的示例中，他们使用样式表将fill属性设置为none。虽然这是可行的，但我宁愿它留在D3代码中。对于任何感兴趣的人来说，这就是代码的样子

var polyline = chart.select(".lines").selectAll("polyline")
                        .data(pie(data), key);

                    polyline.enter()
                        .append("polyline")
                        .style("fill", "none")
                        .style("stroke-width", "2px")
                        .style("stroke", "black")
                        .style("opacity", "0.4");

                    polyline.transition().duration(500)
                        .attrTween("points", function(d){
                            this._current = this._current || d;
                            var interpolate = d3.interpolate(this._current, d);
                            this._current = interpolate(0);
                            return function(t) {
                                var d2 = interpolate(t);
                                var pos = outerArc.centroid(d2);
                                pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
                                return [arc.centroid(d2), outerArc.centroid(d2), pos];
                            };          
                        });

                    polyline.exit().remove();

var polyline = chart.select(".lines").selectAll("polyline")
                        .data(pie(data), key);

                    polyline.enter()
                        .append("polyline")
                        .style("fill", "none")
                        .style("stroke-width", "2px")
                        .style("stroke", "black")
                        .style("opacity", "0.4");

                    polyline.transition().duration(500)
                        .attrTween("points", function(d){
                            this._current = this._current || d;
                            var interpolate = d3.interpolate(this._current, d);
                            this._current = interpolate(0);
                            return function(t) {
                                var d2 = interpolate(t);
                                var pos = outerArc.centroid(d2);
                                pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
                                return [arc.centroid(d2), outerArc.centroid(d2), pos];
                            };          
                        });

                    polyline.exit().remove();

var polyline=图表。选择（“.line”）。选择全部（“polyline”）
.数据（饼图（数据），键）；
多段线。输入（）
.append（“多段线”）
.style（“填充”、“无”）
.style（“笔划宽度”、“2px”）
.style（“笔划”、“黑色”）
.样式（“不透明度”、“0.4”）；
polyline.transition（）.持续时间（500）
.attrTween（“点”，函数（d）{
这个。|电流=这个。|电流| d；
var interpolate=d3.interpolate（该电流，d）；
该值为._电流=插值（0）；
返回函数（t）{
var d2=插值（t）；
var pos=外表面质心（d2）；
位置[0]=半径*0.95*（中间角（d2）