How to fasten the d3 zoomable sunburst transitions?

Question

I have created a zoomable sunburst with the reference from the following website. http://bl.ocks.org/mbostock/4348373

The problem is I have a lot of arcs in the final level ie the outermost ring (nearly 2000 arcs) and this is slowing the sunburst transitions on click.

One way through which I am trying to fasten the process is show the outermost arcs only when the user dives into the sunburst (clicks on any of the sub arcs). If the outermost arc is fourth concentric circle. Show that only when user selects levels 2/3.

I created the initial dataset to have size set to 0 for the outermost arcs. And on click I wrote a function to set the size to 1. However it is not working. Below is the link http://jsfiddle.net/Claw_22/1400rdu0/6/

function sizeFunc(data){
  if (!data.children) {
    if (data.level=="3") {
      data.size="1";
    }
  }
  else {
    for (i=0;i<data.children.length;i++) {
      sizeFunc(data.children[i]);
    }
  }
}

Kindly let me know how we can achieve this. (Alternate solutions to achieve faster performance are also helpful.)

Answer 1

You can change the transition duration to a min level in click function. Something like following

function click(d) {
path.transition()
  .duration(100) //sets the delay in transition
  .attrTween("d", arcTween(d));}