D3.js Donut Graph Labels Getting Polytriangles Instead of Polylines -

D3.js Donut Graph Labels Getting Polytriangles Instead of Polylines -

i have been working on creating donut chart using d3.js. have been next illustration laid out here. has gone great until reach section polylines drawn donut slices text labels. have copied illustration code , while in illustration nice lines triangles shown here.

so, besides not working correctly must admit don't understand polyline piece of code. makes don't know start in looking cause of issue. below polyline drawing code project. help or insight appreciated.

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); homecoming function(t) { var d2 = interpolate(t); var pos = outerarc.centroid(d2); pos[0] = radius * 0.95 * (midangle(d2) < math.pi ? 1 : -1); homecoming [arc.centroid(d2), outerarc.centroid(d2), pos]; }; }); polyline.exit().remove();

edit

so, per usual 1 time gave in , asked question found out wrong. in illustration linked utilize stylesheet set fill property none. while works rather stayed in d3 code. interested code like.

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); homecoming function(t) { var d2 = interpolate(t); var pos = outerarc.centroid(d2); pos[0] = radius * 0.95 * (midangle(d2) < math.pi ? 1 : -1); homecoming [arc.centroid(d2), outerarc.centroid(d2), pos]; }; }); polyline.exit().remove();

so, per usual 1 time gave in , asked question found out wrong. in illustration linked utilize stylesheet set fill property none. while works rather stayed in d3 code. interested code like.

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); homecoming function(t) { var d2 = interpolate(t); var pos = outerarc.centroid(d2); pos[0] = radius * 0.95 * (midangle(d2) < math.pi ? 1 : -1); homecoming [arc.centroid(d2), outerarc.centroid(d2), pos]; }; }); polyline.exit().remove();

d3.js donut-chart