Zoomable Sunburst with Labels issue

Question

I am using metmajer’s Zoomable Sunburst with Labels:

...with large number of nodes. It appears that the labels are very unclear for small partitions and the chart zooms too slow. Is there any way I can hide the labels if not clear (may be depending on depth) so that my chart is clear and fast as well?

Answer 1

This solution hides the text labels of those partition whose size is less than 1% and displays these labels when zoomed. Not a great solution but better than the congested labels in original chart.

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

      }


  });

}

Result: