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

中看到的那样

当我点击旭日的一部分时，文字仍然可见，我只希望它显示何时处于“家”状态。

Answer 1

在谷歌集团d3上回答：需要在中心的文本中添加一个类：

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

如何在缩放时“隐藏”d3 zoomable sunburst中心的文本？

1 个答案: