Question

我是一个旭日双层分区，文本在弧内，但是当我更改关卡时，其他关卡的文字是可见的，有时顶层的文字不会被删除。有人可以帮帮我吗？

这里是我在内部创建路径和文本的代码，以及放大顶层或放大dwon级别时的函数。

        var path = group.append("path")
                .attr("d", arc)
                .style("fill", function(d) {
                    return d.fill;
                })
                .each(function(d) {
                    this._current = updateArc(d);
                })
                .on("click", zoomIn);

        var textEnter = group.append("text")
                .style("fill-opacity", 1)
                .style("fill", "white")
                .attr("text-anchor", "middle")
                .attr("dy", ".2em")
                .attr("transform", function(d) {

                    var angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90;
                    return "translate(" + (arc.centroid(d)) + ")rotate(" + (angle > 90 ? 0 : 0) + ")";
                }).on("click", zoomIn);

        textEnter.append("tspan")
                .attr("x", 0)
                .text(function(d) {
                    return d.name;
                });
        textEnter.append("tspan")
                .attr("x", 0)
                .attr("dy", "1em")
                .text(function(d) {
                    return d.depth ? d.name.split(" ")[1] || "" : "";
                });

        function zoomIn(p) {
            if (p.depth > 1) {
                p = p.parent;
            }
            if (!p.children)
                return;
            //alert(p.parent.name+" parent");
            //alert(p.name+" p");
            zoom(p, p);
        }

        function zoomOut(p) {
            if (!p.parent)
                return;
            //alert(p.parent.name+" parent");
            //alert(p.name+" p");
            zoom(p.parent, p);
        }

        // Zoom to the specified new root.
        function zoom(root, p) {
            //textEnter.transition().attr("opacity", 0);
            if (document.documentElement.__transition__)
                return;

            // Rescale outside angles to match the new layout.
            var enterArc,
                    exitArc,
                    outsideAngle = d3.scale.linear().domain([0, 2 * Math.PI]);

            function insideArc(d) {
                return p.key > d.key
                        ? {depth: d.depth - 1, x: 0, dx: 0} : p.key < d.key
                        ? {depth: d.depth - 1, x: 2 * Math.PI, dx: 0}
                : {depth: 0, x: 0, dx: 2 * Math.PI};
            }

            function outsideArc(d) {
                return {depth: d.depth + 1, x: outsideAngle(d.x), dx: outsideAngle(d.x + d.dx) - outsideAngle(d.x)};
            }

            center.datum(root);

            // When zooming in, arcs enter from the outside and exit to the inside.
            // Entering outside arcs start from the old layout.
            if (root === p)
                enterArc = outsideArc, exitArc = insideArc, outsideAngle.range([p.x, p.x + p.dx]);

            path = path.data(partition.nodes(root).slice(1), function(d) {

                return d.key;
            });

            textEnter = textEnter.data(partition.nodes(root).slice(1), function(d) {

                return d.key;
            });


            // When zooming out, arcs enter from the inside and exit to the outside.
            // Exiting outside arcs transition to the new layout.
            if (root !== p)
                enterArc = insideArc, exitArc = outsideArc, outsideAngle.range([p.x, p.x + p.dx]);

            d3.transition().duration(d3.event.altKey ? 7500 : 750).each(function() {

                path.exit().transition()
                        .style("fill-opacity", function(d) {

                            return d.depth === 1 + (root === p) ? 1 : 0;
                        })
                        .attrTween("d", function(d) {
                            return arcTween.call(this, exitArc(d));
                        })
                        .remove();

                textEnter.data(partition.nodes(root).slice(1))
                        .transition()
                        .duration(500)
                        .attr("transform", function(d) {
                            return "translate(" + arc.centroid(d) + ")";
                        });

                //d3.selectAll("path").remove();
                //d3.selectAll("text").remove();

                path.enter().append("path")
                        .style("fill-opacity", function(d) {
                            return d.depth === 2 - (root === p) ? 1 : 0;
                        })
                        .style("fill", function(d) {
                            return d.fill;
                        })
                        .on("click", zoomIn)
                        .each(function(d) {

                            this._current = enterArc(d);
                        });

                textEnter.enter().append("text")
                        .style("fill", "white")
                        .attr("transform", function(d) {
                            var angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90;
                            return "translate(" + (arc.centroid(d)) + ")rotate(" + (angle > 90 ? 0 : 0) + ")";
                        }).attr("text-anchor", "middle")
                        .text(function(d) {
                            return d.name;
                        }).on("click", zoomIn);

                path.transition()
                        .style("fill-opacity", 1)
                        .attrTween("d", function(d) {
                            return arcTween.call(this, updateArc(d));
                        });
            });
        }
    });

Answer 1

在

之后，您可以尝试在转换块内添加一行吗？

path.exit().transition()...

删除现有标签，例如：

textEnter.exit().remove();

例如，这里有类似的内容，其中labels是要观察的变量：http://bl.ocks.org/tomalrussell/2c8c5e24bf614f80e3bc#d3.sunburst.js

更新sunburst双层分区中的文本

1 个答案: