Zoomable Sunburst与标签问题

Question

我正在使用metmajer的Zoomable Sunburst with Labels：

...拥有大量节点。看起来标签对于小分区来说非常不清楚，并且图表变焦太慢。有没有什么方法可以隐藏标签，如果不清楚（可能取决于深度），以便我的图表清晰，快速？

Answer 1

此解决方案隐藏了大小小于1％的分区的文本标签，并在缩放时显示这些标签。不是一个很好的解决方案，但比原始图表中的拥挤标签更好。

var text = g.append("text")
    .attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
    .attr("x", function(d) { return y(d.y); })
    .attr("dx", "6") // margin
    .attr("dy", ".35em") // vertical-align
    .attr("visibility",function(d) { return d.dx < 0.01? "hidden" : "visible"})
    .text(function(d) { return d.name; });

function click(d) {
    var total = d.dx;

    // fade out all text elements
    text.transition().attr("opacity", 0);

    path.transition()
       .duration(750)
       .attrTween("d", arcTween(d))
       .each("end", function(e, i) {
           // check if the animated element's data e lies within the visible angle span given in d
           if (e.x >= d.x && e.x < (d.x + d.dx)) {
           // get a selection of the associated text element
           var arcText = d3.select(this.parentNode).select("text");
            // fade in the text element and recalculate positions
            arcText.transition()
            .attr("opacity", 1)

            .attr("transform", function() { return "rotate(" + computeTextRotation(e) + ")" })
            .attr("x", function(d) { return y(d.y); })
            .attr("visibility",function(d) { return d.dx/total < 0.01? "hidden" : "visible"});

      }


  });

}

结果：