D3 Examples - Attempt at Sunburst with Transitions

xxxxxxxxxx
 
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<head>
<title>D3 Test</title>
​
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@1.29.5/d3.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@1.29.5/d3.layout.js"></script>
​
​
</head>
<body>
​
<div class="gallery" id="chart">
​
</div>
​
<script type="text/javascript">
​
var w = 660,
    h = 600,
    r = Math.min(w, h) / 2,
    color = d3.scale.category20();
    
var x,
    y,
    duration = 500,
    delay = 500;
​
var vis = d3.select("#chart").append("svg:svg")
    .attr("width", w)
    .attr("height", h)
  .append("svg:g")
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
​
var partition = d3.layout.partition()
    .sort(null)
    .size([2 * Math.PI, r * r])
    .value(function(d) { return 1; });
​
var pos = function(d) { return (d.x + d.dx / 2 - Math.PI / 2) / Math.PI * 180;}
​
var arc = d3.svg.arc()
    .startAngle(function(d) { return d.x; })
    .endAngle(function(d) { return d.x + d.dx; })
    .innerRadius(function(d) { return Math.sqrt(d.y); })
    .outerRadius(function(d) { return Math.sqrt(d.y + d.dy)/*+(d.depth == 0 ? 0 : d.value/2)*/; });
​
​
d3.json("math_map_compact_3.json", function(json) {
  var g = vis.data([json]).selectAll('g')
        .data(partition)
    .enter().append("svg:g");
      //.attr("display", function(d) { return d.depth ? null : "none"; }); // hide inner ring
  
    g.append("svg:path")
        .attr("class","unselected")
        .attr("d", arc)
        .attr("fill-rule", "evenodd")
        .attr("display", function(d) { return d.depth > 1 ? "none" : null;})
        .style("stroke", "#fff")
        .style("fill", function(d) { return color((d.children ? d.data : d.parent).name); })
        //.tween("arc",arcTween)
        .on("click",collapseSections);
        //.on("mouseover",mouseover)
        //.on("mouseout",mouseout);
  
    g.append("svg:text")
        .attr("transform", function(d) { return "rotate(" + (d.x + d.dx / 2 - Math.PI / 2) / Math.PI * 180 + ")";})
        .attr("x", function(d) { return Math.sqrt(d.y);})
        //.attr("x", function(d) { return pos(d) == 90 ? "-30" : pos(d) > 0 ? (-Math.sqrt(d.y)-80) : (Math.sqrt(d.y)+10);})
        //.attr("dx", function(d) { return d.depth == 0 ? "-20" : "6";}) // margin
        .attr("dy", ".35em") // vertical-align
        .attr("class","unselected")
        .attr("display", function(d) { return d.depth > 1 ? "none" : null;})
        .text(function(d) { return d.data.name;});
​
 
});
​
function collapseSections(d, i) {
    console.log(d);
    newSec = d.data.name;
    //console.log(this);
    //console.log(newSec);
    //console.log(this.nextSibling);
    d3.select(this, this.nextSibling)
        .attr("class","selected");
        
    d3.select(this.nextSibling)
        .attr("class","selected");
        
    d3.selectAll("path.unselected, text.unselected").transition()
        .duration(duration)
        .style("opacity",0.1)
        .remove();
    
​
}
​
function tweenArc(b) {
    b.endAngle = 360;
    var i = d3.interpolate({endAngle:0}, b);
    console.log(i);
    return function(t) {
        return arc(i(t));
    };
}
​
// Interpolate the scales!
function arcTween(d) {
  var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
      yd = d3.interpolate(y.domain(), [d.y, 1]),
      yr = d3.interpolate(y.range(), [d.y ? 20 : 0, r]);
  return function(d, i) {
    return i
        ? function(t) { return arc(d); }
        : function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
  };
}
​
function mouseover(d, i) { 
 d3.select(this) 
     .style("fill", "brown") 
     //.style("stroke", "grey"); 
} 
​
function mouseout(d, i) { 
 d3.select(this) 
     .style("fill", function(d) { return color((d.children ? d.data : d.parent).name); }) 
}
​
function click(d, i) {
  console.log("click", d, i);
}
​
// Stash the old values for transition.
function stash(d) {
  d.x0 = d.x;
  d.dx0 = d.dx;
}
​
</script>
​
​
</body>
    