缩放时如何 "hide" d3 zoomable sunburst 中心的文本？

Question

我已将文本和（图形）添加到我的旭日形照片的中心，我希望它在缩放时隐藏起来。

            svg.append("image")
                    .attr("xlink:href", "scholarWorksDark.png")
                    .attr("x", -80)
                    .attr("y", -150)
                    .attr("width", "150")
                    .attr("height", "150"); 
                    //.on("click", click(d));


        svg.append("text")
            //.on("click",click)
            .attr("x", -115)
            .attr("y", 90)
            .style("font-size",16)
            //.style("font-weight","bold")
            .html("Click to explore our <br/><br/>" +  hierarchy.value + " ETDs");

正如你在我的 plunk

中看到的

当我单击旭日形的一部分时，文本仍然可见，我只希望它在处于 "home" 状态时显示。

Answer 1

在 d3 Google 群上回答：需要在中间的文本中添加一个class：

svg.append("text")
            //.on("click",click)
            .attr("class","center-text")
            .attr("x", -115)
        .attr("y", 90)
            .style("font-size",16)
            //.style("font-weight","bold")
            .html("Click to explore our <br/><br/>" +  hierarchy.value + " ETDs");

        function click(d) {
            path.transition()
                .duration(750)
                .attrTween("d", arcTween(d));
            if(d.key !== "ETD"){
              svg.select(".center-text")
                 .style("display","none")
            } else {
              svg.select(".center-text")
                 .style("display","")
            }
            mouseout();
        };

缩放时如何 "hide" d3 zoomable sunburst 中心的文本？

How to "hide" text in center of d3 zoomable sunburst when zooming?

javascript

d3.js

sunburst-diagram