javascript - 可缩放旭日与标签问题

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

      }


  });

}

结果: