D3.js 甜甜圈图标签获取多三角形而不是多段线答案

【问题标题】：D3.js Donut Graph Labels Getting Polytriangles Instead of PolylinesD3.js 甜甜圈图标签获取多三角形而不是多段线
【发布时间】：2014-06-22 01:24:21
【问题描述】：

我一直致力于使用 D3.js 创建一个圆环图。我一直在关注HERE 中的示例。一切都很顺利，直到我到达关于从甜甜圈切片绘制到文本标签的折线部分。我已经完全复制了示例代码，虽然在他们的示例中它们得到了很好的线条，但我得到了三角形，如图所示 HERE。

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

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

编辑

所以，像往常一样，一旦我屈服并提出这个问题，我就发现了问题所在。在我链接到的示例中，他们使用样式表将填充属性设置为无。虽然这可行，但我宁愿它留在 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();

【问题讨论】：

标签： d3.js donut-chart

【解决方案1】：

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

【讨论】：