带有水平标签的d3v4饼图

时间:2020-01-23 17:29:09

标签: d3.js

我有一些带有漂亮的水平标签的旧饼图代码-我正在从v3移植到v4。但是我的标签/指针不再起作用了?

我没有收到任何错误,所以不确定为什么不应用旧的指针/标签代码-现在有更有效的方法吗?

enter image description here

https://jsfiddle.net/cybsgtq8/2/

旧标签和指针的实现

                //__labels  
                var labels = labels.selectAll("text")
                    .data(piedata);

                labels.enter()
                    .append("text")
                    .attr("text-anchor", "middle")


                labels
                    .attr("x", function(d) {
                        var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2;
                        d.cx = Math.cos(a) * (ir+((r-ir)/2));
                        return d.x = Math.cos(a) * (r + 20);
                    })
                    .attr("y", function(d) {
                        var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2;
                        d.cy = Math.sin(a) * (ir+((r-ir)/2));
                        return d.y = Math.sin(a) * (r + 20);
                    })
                    .text(function(d) {
                        return d.data.label; 
                    })
                    .each(function(d) {
                        var bbox = this.getBBox();
                        d.sx = d.x - bbox.width/2 - 2;
                        d.ox = d.x + bbox.width/2 + 2;
                        d.sy = d.oy = d.y + 5;
                    })
                    .transition()
                        .duration(300)

                labels
                    .transition()
                    .duration(300)      

                labels.exit().remove();
                //__labels


                //__pointers
                pointers.append("defs").append("marker")
                    .attr("id", "circ")
                    .attr("markerWidth", 6)
                    .attr("markerHeight", 6)
                    .attr("refX", 3)
                    .attr("refY", 3)
                    .append("circle")
                    .attr("cx", 3)
                    .attr("cy", 3)
                    .attr("r", 3);

                var pointers = pointers.selectAll("path.pointer")
                    .data(piedata);

                pointers.enter()
                    .append("path")
                    .attr("class", "pointer")
                    .style("fill", "none")
                    .style("stroke", "black")
                    .attr("marker-end", "url(#circ)");

                pointers
                    .attr("d", function(d) {
                        if(d.cx > d.ox) {
                            return "M" + d.sx + "," + d.sy + "L" + d.ox + "," + d.oy + " " + d.cx + "," + d.cy;
                        } else {
                            return "M" + d.ox + "," + d.oy + "L" + d.sx + "," + d.sy + " " + d.cx + "," + d.cy;
                        }
                    })
                    .transition()
                        .duration(300)

                pointers
                    .transition()
                    .duration(300)      

                pointers.exit().remove();

                //__pointers

-我的新jsfiddle带有新代码 https://jsfiddle.net/ef0vcz2g/1/

enter image description here ^发生了什么事。

0 个答案:

没有答案