CODEWITHSUNDEEP
d3.js
Shon
Shon

Reputation: 700

How to show labels in first two rings only in a zoomable sunburst partition with rotated labels?

Provided the following fiddle, how can I modify it to display the rotated labels in the inner two rings only? It's simple enough to show the label based on the depth of the node, but it breaks after zooming. I removed my modification which clamped labels to the first two rings, since it fell apart on zoom, so that the fiddle is a clean slate. 

 var text = g.append("text")
      .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")rotate(" + computeTextRotation(d) + ")"; })
      .attr('text-anchor', function (d) { return computeTextRotation(d) > 180 ? "end" : "start"; })
      .attr("dx", "6") // margin
      .attr("dy", ".35em") // vertical-align
      .text(function(d) { return d.name; });

fiddle

TIA.

Upvotes: 1

Views: 657

Answers (1)

Mark
Mark

Reputation: 108557

You want it to show the top two labels even when zoomed?

var text = g.append("text")
  .attr("class", "label") //<-- add class to look up later
  .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")rotate(" + computeTextRotation(d) + ")"; })
  .attr('text-anchor', function (d) { return computeTextRotation(d) > 180 ? "end" : "start"; })
  .attr("dx", "6") // margin
  .attr("dy", ".35em") // vertical-align
  .text(function(d) { return d.name; })
  .style('visibility', function(d) { //<-- set it initially
      return (d.depth === 0 || d.depth === 1) ? 'visible' : 'hidden';   
  });

function click(d) {
  d3.selectAll(".label") //<-- find them all
    .style('visibility', function(d2) {
      return (d2.depth === d.depth || d2.depth === d.depth - 1) ? 'visible' : 'hidden';   //<-- set visibility based on selected node
    });

  ...

EDITS FOR COMMENTS

Since the zoom is shows click + 1 level up, looks like you need to handle the 0 depth as a special case:

 function isTextVisible(d, depth){
   if (depth === 0){
     return d.depth === 0 || d.depth === 1;
   } else {
     return d.depth === depth || d.depth === depth - 1;
   }
 }

function click(d) {

  d3.selectAll(".label")
    .style('visibility', function(d2) {
      return isTextVisible(d2, d.depth) ? 'visible' : 'hidden';   
    });  

  ...

Updated fiddle here.

Upvotes: 2

Related Questions