Edit in JSFiddle

   var treeData = [{
      "name": "flare",
      "kids": [{
        "name": "analytics",
        "kids": [{
          "name": "cluster",
          "kids": [{
            "name": "AgglomerativeCluster",
            "size": 3938
          }, {
            "name": "CommunityStructure",
            "size": 3812
          }, {
            "name": "HierarchicalCluster",
            "size": 6714
          }, {
            "name": "MergeEdge",
            "size": 743
          }]
        }, {
          "name": "graph",
          "kids": [{
            "name": "BetweennessCentrality",
            "size": 3534
          }, {
            "name": "LinkDistance",
            "size": 5731
          }, {
            "name": "MaxFlowMinCut",
            "size": 7840
          }, {
            "name": "ShortestPaths",
            "size": 5914
          }, {
            "name": "SpanningTree",
            "size": 3416
          }]
        }, {
          "name": "optimization",
          "kids": [{
            "name": "AspectRatioBanker",
            "size": 7074
          }]
        }]
      }, {
        "name": "animate",
        "kids": [{
          "name": "Easing",
          "size": 17010
        }, {
          "name": "FunctionSequence",
          "size": 5842
        }, {
          "name": "interpolate",
          "kids": [{
            "name": "ArrayInterpolator",
            "size": 1983
          }, {
            "name": "ColorInterpolator",
            "size": 2047
          }, {
            "name": "DateInterpolator",
            "size": 1375
          }, {
            "name": "Interpolator",
            "size": 8746
          }, {
            "name": "MatrixInterpolator",
            "size": 2202
          }, {
            "name": "NumberInterpolator",
            "size": 1382
          }, {
            "name": "ObjectInterpolator",
            "size": 1629
          }, {
            "name": "PointInterpolator",
            "size": 1675
          }, {
            "name": "RectangleInterpolator",
            "size": 2042
          }]
        }, {
          "name": "ISchedulable",
          "size": 1041
        }, {
          "name": "Parallel",
          "size": 5176
        }, {
          "name": "Pause",
          "size": 449
        }, {
          "name": "Scheduler",
          "size": 5593
        }, {
          "name": "Sequence",
          "size": 5534
        }, {
          "name": "Transition",
          "size": 9201
        }, {
          "name": "Transitioner",
          "size": 19975
        }, {
          "name": "TransitionEvent",
          "size": 1116
        }, {
          "name": "Tween",
          "size": 6006
        }]
      }, {
        "name": "data",
        "kids": [{
          "name": "converters",
          "kids": [{
            "name": "Converters",
            "size": 721
          }, {
            "name": "DelimitedTextConverter",
            "size": 4294
          }, {
            "name": "GraphMLConverter",
            "size": 9800
          }, {
            "name": "IDataConverter",
            "size": 1314
          }, {
            "name": "JSONConverter",
            "size": 2220
          }]
        }, {
          "name": "DataField",
          "size": 1759
        }, {
          "name": "DataSchema",
          "size": 2165
        }, {
          "name": "DataSet",
          "size": 586
        }, {
          "name": "DataSource",
          "size": 3331
        }, {
          "name": "DataTable",
          "size": 772
        }, {
          "name": "DataUtil",
          "size": 3322
        }]
      }, {
        "name": "display",
        "kids": [{
          "name": "DirtySprite",
          "size": 8833
        }, {
          "name": "LineSprite",
          "size": 1732
        }, {
          "name": "RectSprite",
          "size": 3623
        }, {
          "name": "TextSprite",
          "size": 10066
        }]
      }, {
        "name": "flex",
        "kids": [{
          "name": "FlareVis",
          "size": 4116
        }]
      }, {
        "name": "physics",
        "kids": [{
          "name": "DragForce",
          "size": 1082
        }, {
          "name": "GravityForce",
          "size": 1336
        }, {
          "name": "IForce",
          "size": 319
        }, {
          "name": "NBodyForce",
          "size": 10498
        }, {
          "name": "Particle",
          "size": 2822
        }, {
          "name": "Simulation",
          "size": 9983
        }, {
          "name": "Spring",
          "size": 2213
        }, {
          "name": "SpringForce",
          "size": 1681
        }]
      }, {
        "name": "query",
        "kids": [{
          "name": "AggregateExpression",
          "size": 1616
        }, {
          "name": "And",
          "size": 1027
        }, {
          "name": "Arithmetic",
          "size": 3891
        }, {
          "name": "Average",
          "size": 891
        }, {
          "name": "BinaryExpression",
          "size": 2893
        }, {
          "name": "Comparison",
          "size": 5103
        }, {
          "name": "CompositeExpression",
          "size": 3677
        }, {
          "name": "Count",
          "size": 781
        }, {
          "name": "DateUtil",
          "size": 4141
        }, {
          "name": "Distinct",
          "size": 933
        }, {
          "name": "Expression",
          "size": 5130
        }, {
          "name": "ExpressionIterator",
          "size": 3617
        }, {
          "name": "Fn",
          "size": 3240
        }, {
          "name": "If",
          "size": 2732
        }, {
          "name": "IsA",
          "size": 2039
        }, {
          "name": "Literal",
          "size": 1214
        }, {
          "name": "Match",
          "size": 3748
        }, {
          "name": "Maximum",
          "size": 843
        }, {
          "name": "methods",
          "kids": [{
            "name": "add",
            "size": 593
          }, {
            "name": "and",
            "size": 330
          }, {
            "name": "average",
            "size": 287
          }, {
            "name": "count",
            "size": 277
          }, {
            "name": "distinct",
            "size": 292
          }, {
            "name": "div",
            "size": 595
          }, {
            "name": "eq",
            "size": 594
          }, {
            "name": "fn",
            "size": 460
          }, {
            "name": "gt",
            "size": 603
          }, {
            "name": "gte",
            "size": 625
          }, {
            "name": "iff",
            "size": 748
          }, {
            "name": "isa",
            "size": 461
          }, {
            "name": "lt",
            "size": 597
          }, {
            "name": "lte",
            "size": 619
          }, {
            "name": "max",
            "size": 283
          }, {
            "name": "min",
            "size": 283
          }, {
            "name": "mod",
            "size": 591
          }, {
            "name": "mul",
            "size": 603
          }, {
            "name": "neq",
            "size": 599
          }, {
            "name": "not",
            "size": 386
          }, {
            "name": "or",
            "size": 323
          }, {
            "name": "orderby",
            "size": 307
          }, {
            "name": "range",
            "size": 772
          }, {
            "name": "select",
            "size": 296
          }, {
            "name": "stddev",
            "size": 363
          }, {
            "name": "sub",
            "size": 600
          }, {
            "name": "sum",
            "size": 280
          }, {
            "name": "update",
            "size": 307
          }, {
            "name": "variance",
            "size": 335
          }, {
            "name": "where",
            "size": 299
          }, {
            "name": "xor",
            "size": 354
          }, {
            "name": "_",
            "size": 264
          }]
        }, {
          "name": "Minimum",
          "size": 843
        }, {
          "name": "Not",
          "size": 1554
        }, {
          "name": "Or",
          "size": 970
        }, {
          "name": "Query",
          "size": 13896
        }, {
          "name": "Range",
          "size": 1594
        }, {
          "name": "StringUtil",
          "size": 4130
        }, {
          "name": "Sum",
          "size": 791
        }, {
          "name": "Variable",
          "size": 1124
        }, {
          "name": "Variance",
          "size": 1876
        }, {
          "name": "Xor",
          "size": 1101
        }]
      }, {
        "name": "scale",
        "kids": [{
          "name": "IScaleMap",
          "size": 2105
        }, {
          "name": "LinearScale",
          "size": 1316
        }, {
          "name": "LogScale",
          "size": 3151
        }, {
          "name": "OrdinalScale",
          "size": 3770
        }, {
          "name": "QuantileScale",
          "size": 2435
        }, {
          "name": "QuantitativeScale",
          "size": 4839
        }, {
          "name": "RootScale",
          "size": 1756
        }, {
          "name": "Scale",
          "size": 4268
        }, {
          "name": "ScaleType",
          "size": 1821
        }, {
          "name": "TimeScale",
          "size": 5833
        }]
      }, {
        "name": "util",
        "kids": [{
          "name": "Arrays",
          "size": 8258
        }, {
          "name": "Colors",
          "size": 10001
        }, {
          "name": "Dates",
          "size": 8217
        }, {
          "name": "Displays",
          "size": 12555
        }, {
          "name": "Filter",
          "size": 2324
        }, {
          "name": "Geometry",
          "size": 10993
        }, {
          "name": "heap",
          "kids": [{
            "name": "FibonacciHeap",
            "size": 9354
          }, {
            "name": "HeapNode",
            "size": 1233
          }]
        }, {
          "name": "IEvaluable",
          "size": 335
        }, {
          "name": "IPredicate",
          "size": 383
        }, {
          "name": "IValueProxy",
          "size": 874
        }, {
          "name": "math",
          "kids": [{
            "name": "DenseMatrix",
            "size": 3165
          }, {
            "name": "IMatrix",
            "size": 2815
          }, {
            "name": "SparseMatrix",
            "size": 3366
          }]
        }, {
          "name": "Maths",
          "size": 17705
        }, {
          "name": "Orientation",
          "size": 1486
        }, {
          "name": "palette",
          "kids": [{
            "name": "ColorPalette",
            "size": 6367
          }, {
            "name": "Palette",
            "size": 1229
          }, {
            "name": "ShapePalette",
            "size": 2059
          }, {
            "name": "SizePalette",
            "size": 2291
          }]
        }, {
          "name": "Property",
          "size": 5559
        }, {
          "name": "Shapes",
          "size": 19118
        }, {
          "name": "Sort",
          "size": 6887
        }, {
          "name": "Stats",
          "size": 6557
        }, {
          "name": "Strings",
          "size": 22026
        }]
      }, {
        "name": "vis",
        "kids": [{
          "name": "axis",
          "kids": [{
            "name": "Axes",
            "size": 1302
          }, {
            "name": "Axis",
            "size": 24593
          }, {
            "name": "AxisGridLine",
            "size": 652
          }, {
            "name": "AxisLabel",
            "size": 636
          }, {
            "name": "CartesianAxes",
            "size": 6703
          }]
        }, {
          "name": "controls",
          "kids": [{
            "name": "AnchorControl",
            "size": 2138
          }, {
            "name": "ClickControl",
            "size": 3824
          }, {
            "name": "Control",
            "size": 1353
          }, {
            "name": "ControlList",
            "size": 4665
          }, {
            "name": "DragControl",
            "size": 2649
          }, {
            "name": "ExpandControl",
            "size": 2832
          }, {
            "name": "HoverControl",
            "size": 4896
          }, {
            "name": "IControl",
            "size": 763
          }, {
            "name": "PanZoomControl",
            "size": 5222
          }, {
            "name": "SelectionControl",
            "size": 7862
          }, {
            "name": "TooltipControl",
            "size": 8435
          }]
        }, {
          "name": "data",
          "kids": [{
            "name": "Data",
            "size": 20544
          }, {
            "name": "DataList",
            "size": 19788
          }, {
            "name": "DataSprite",
            "size": 10349
          }, {
            "name": "EdgeSprite",
            "size": 3301
          }, {
            "name": "NodeSprite",
            "size": 19382
          }, {
            "name": "render",
            "kids": [{
              "name": "ArrowType",
              "size": 698
            }, {
              "name": "EdgeRenderer",
              "size": 5569
            }, {
              "name": "IRenderer",
              "size": 353
            }, {
              "name": "ShapeRenderer",
              "size": 2247
            }]
          }, {
            "name": "ScaleBinding",
            "size": 11275
          }, {
            "name": "Tree",
            "size": 7147
          }, {
            "name": "TreeBuilder",
            "size": 9930
          }]
        }, {
          "name": "events",
          "kids": [{
            "name": "DataEvent",
            "size": 2313
          }, {
            "name": "SelectionEvent",
            "size": 1880
          }, {
            "name": "TooltipEvent",
            "size": 1701
          }, {
            "name": "VisualizationEvent",
            "size": 1117
          }]
        }, {
          "name": "legend",
          "kids": [{
            "name": "Legend",
            "size": 20859
          }, {
            "name": "LegendItem",
            "size": 4614
          }, {
            "name": "LegendRange",
            "size": 10530
          }]
        }, {
          "name": "operator",
          "kids": [{
            "name": "distortion",
            "kids": [{
              "name": "BifocalDistortion",
              "size": 4461
            }, {
              "name": "Distortion",
              "size": 6314
            }, {
              "name": "FisheyeDistortion",
              "size": 3444
            }]
          }, {
            "name": "encoder",
            "kids": [{
              "name": "ColorEncoder",
              "size": 3179
            }, {
              "name": "Encoder",
              "size": 4060
            }, {
              "name": "PropertyEncoder",
              "size": 4138
            }, {
              "name": "ShapeEncoder",
              "size": 1690
            }, {
              "name": "SizeEncoder",
              "size": 1830
            }]
          }, {
            "name": "filter",
            "kids": [{
              "name": "FisheyeTreeFilter",
              "size": 5219
            }, {
              "name": "GraphDistanceFilter",
              "size": 3165
            }, {
              "name": "VisibilityFilter",
              "size": 3509
            }]
          }, {
            "name": "IOperator",
            "size": 1286
          }, {
            "name": "label",
            "kids": [{
              "name": "Labeler",
              "size": 9956
            }, {
              "name": "RadialLabeler",
              "size": 3899
            }, {
              "name": "StackedAreaLabeler",
              "size": 3202
            }]
          }, {
            "name": "layout",
            "kids": [{
              "name": "AxisLayout",
              "size": 6725
            }, {
              "name": "BundledEdgeRouter",
              "size": 3727
            }, {
              "name": "CircleLayout",
              "size": 9317
            }, {
              "name": "CirclePackingLayout",
              "size": 12003
            }, {
              "name": "DendrogramLayout",
              "size": 4853
            }, {
              "name": "ForceDirectedLayout",
              "size": 8411
            }, {
              "name": "IcicleTreeLayout",
              "size": 4864
            }, {
              "name": "IndentedTreeLayout",
              "size": 3174
            }, {
              "name": "Layout",
              "size": 7881
            }, {
              "name": "NodeLinkTreeLayout",
              "size": 12870
            }, {
              "name": "PieLayout",
              "size": 2728
            }, {
              "name": "RadialTreeLayout",
              "size": 12348
            }, {
              "name": "RandomLayout",
              "size": 870
            }, {
              "name": "StackedAreaLayout",
              "size": 9121
            }, {
              "name": "TreeMapLayout",
              "size": 9191
            }]
          }, {
            "name": "Operator",
            "size": 2490
          }, {
            "name": "OperatorList",
            "size": 5248
          }, {
            "name": "OperatorSequence",
            "size": 4190
          }, {
            "name": "OperatorSwitch",
            "size": 2581
          }, {
            "name": "SortOperator",
            "size": 2023
          }]
        }, {
          "name": "Visualization",
          "size": 16540
        }]
      }]
    }];

    var PAGINATION = 2;
    // ************** Generate the tree diagram	 *****************
    var margin = {
        top: 20,
        right: 120,
        bottom: 20,
        left: 120
      },
      width = 960 - margin.right - margin.left,
      height = 400 - margin.top - margin.bottom;

    var i = 0,
      duration = 750,
      root;

    var tree = d3.layout.tree()
      .size([height, width])
      .separation(function separation(a, b) {
        return a.parent == b.parent ? 1 : 3;
      });;

    var diagonal = d3.svg.diagonal()
      .projection(function(d) {
        return [d.y, d.x];
      });

    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.right + margin.left)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var color = d3.scale.category20();

    root = treeData[0];
    root.x0 = height / 2;
    root.y0 = 0;
    reset(root)
    update(root);


    function update(source) {
      // Compute the new tree layout.
      var nodes = tree.nodes(root).reverse(),
        links = tree.links(nodes);
      // Normalize for fixed-depth.
      nodes.forEach(function(d) {
        d.y = d.depth * 180;
      });
      // Update the nodes…
      var node = svg.selectAll("g.node")
        .data(nodes, function(d) {
          return d.id || (d.id = ++i);
        });

      // Enter any new nodes at the parent's previous position.
      var nodeEnter = node.enter().append("g")
        .attr("class", "node")
        .attr("transform", function(d) {
          return "translate(" + source.y0 + "," + source.x0 + ")";
        })
        .on("click", click);

      nodeEnter.append("circle")
        .attr("r", 1e-6)
        .style("fill", function(d) {
          return d._children ? "lightsteelblue" : "#fff";
        });

      nodeEnter.append("text")
        .attr("x", function(d) {
          return d.Children || d._children ? -13 : 13;
        })
        .attr("dy", ".35em")
        .attr("text-anchor", function(d) {
          return d.Children || d._children ? "end" : "start";
        })
        .text(function(d) {
          return d.name;
        })
        .style("fill-opacity", 1e-6);

      // Transition nodes to their new position.
      var nodeUpdate = node.transition()
        .duration(duration)
        .attr("transform", function(d) {
          return "translate(" + d.y + "," + d.x + ")";
        });

      nodeUpdate.select("circle")
        .attr("r", 10)
        .style("fill", function(d) {
          var sam = d.parent? color(d.parent.id): color();
          console.log(sam);
          return d._children ? "white" : sam ;
        });

      nodeUpdate.select("text")
        .style("fill-opacity", 1);

      // Transition exiting nodes to the parent's new position.
      var nodeExit = node.exit().transition()
        .duration(duration)
        .attr("transform", function(d) {
          return "translate(" + source.y + "," + source.x + ")";
        })
        .remove();

      nodeExit.select("circle")
        .attr("r", 1e-6);

      nodeExit.select("text")
        .style("fill-opacity", 1e-6);

      // Update the links…
      var link = svg.selectAll("path.link")
        .data(links, function(d) {
          return d.target.id;
        });

      // Enter any new links at the parent's previous position.
      link.enter().insert("path", "g")
        .attr("class", "link")
        .attr("d", function(d) {
          var o = {
            x: source.x0,
            y: source.y0
          };
          return diagonal({
            source: o,
            target: o
          });
        });

      // Transition links to their new position.
      link.transition()
        .duration(duration)
        .attr("d", diagonal);

      // Transition exiting nodes to the parent's new position.
      link.exit().transition()
        .duration(duration)
        .attr("d", function(d) {
          var o = {
            x: source.x,
            y: source.y
          };
          return diagonal({
            source: o,
            target: o
          });;
        })
        .remove();

      // Stash the old positions for transition.
      nodes.forEach(function(d) {
        d.x0 = d.x;
        d.y0 = d.y;
      });
      var parents = nodes.filter(function(d) {
        return (d.kids && d.kids.length > PAGINATION) ? true : false;
      });
      svg.selectAll(".page").remove();
      parents.forEach(function(p) {
        if (p._children)
          return;
        var p1 = p.children[p.children.length - 1];
        var p2 = p.children[0];
        var pagingData = [];
        if (p.page > 1) {
          pagingData.push({
            type: "prev",
            parent: p,
            no: (p.page - 1)
          });
        }
        if (p.page < Math.ceil(p.kids.length / PAGINATION)) {
          pagingData.push({
            type: "next",
            parent: p,
            no: (p.page + 1)
          });
        }
        var pageControl = svg.selectAll(".page")
          .data(pagingData, function(d) {
            return (d.parent.id + d.type);
          }).enter()
          .append("g")
          .attr("class", "page")
          .attr("transform", function(d) {
            var x = (d.type == "next") ? p2.y : p1.y;
            var y = (d.type == "prev") ? (p2.x - 30) : (p1.x + 30);
            return "translate(" + x + "," + y + ")";
          }).on("click", paginate);

        pageControl
          .append("circle")
          .attr("r", 15)
          .style("fill", function(d) {
          return d.parent? color(d.parent.id): color();
        })
        pageControl
          .append("image")
          .attr("xlink:href", function(d) {
            if (d.type == "next") {
              return "https://dl.dropboxusercontent.com/s/p7qjclv1ulvoqw3/icon1.png"
            } else {
              return "https://dl.dropboxusercontent.com/s/mdzt36poc1z39s3/icon3.png"
            }
          })
          .attr("x", -12.5)
          .attr("y", -12.5)
          .attr("width", 25)
          .attr("height", 25);
      });
    }

    function paginate(d) {
      console.log(d, "data")
      d.parent.page = d.no;
      setPage(d.parent);
      update(root);
    }

    function setPage(d) {
      if (d && d.kids) {
        d.children = [];
        d.kids.forEach(function(d1, i) {
          if (d.page === d1.pageNo) {
            d.children.push(d1);
          }
        })
      }
    }

    function reset(d) {
      if (d && d.kids) {
        d.page = 1;
        d.children = [];
        d.kids.forEach(function(d1, i) {
          d1.pageNo = Math.ceil((i + 1) / PAGINATION);
          if (d.page === d1.pageNo) {
            d.children.push(d1)
          }
          reset(d1);
        })
      }
    }
    // Toggle children on click.
    function click(d) {
      if (d.children) {
        d._children = d.children;
        d.children = null;
      } else {
        d.children = d._children;
        d._children = null;
      }
      update(d);
    }
    .node {
      cursor: pointer;
    }
    
    .node circle {
      fill: #fff;
      stroke: steelblue;
      stroke-width: 3px;
    }
    
    .node text {
      font: 12px sans-serif;
    }
    
    .link {
      fill: none;
      stroke: #ccc;
      stroke-width: 2px;
    }