Javascript D3js图表中带分页的图例

我有大量的图例，但我希望一次只显示5个图例。我想有一个按钮，显示接下来的5个图例。有人能帮我实现这个吗

我已经实现了分页，但最后我有两个重复的图例。 我的工作代码在这里

var数据=[
{
“年龄”：“我也想知道这个问题的好答案。你能分享你的代码吗？这是一个简单的饼图。我有太多的图例，图表的宽度太小，所以我无法看到所有的图例。所以我只想看到几个图例，带按钮查看更多图例可能会有所帮助。我是d3.js新手，无法遵循上述示例。
        var data=[
          {
            "age":"<5",
            "population":2704659
          },
          {
            "age":"5-10",
            "population":4499890
          },
          {
            "age":"10-13",
            "population":6736433
          },
          {
            "age":"14-16",
            "population":2159981
          },
          {
            "age":"16-18",
            "population":3853788
          },
          {
            "age":"18-22",
            "population":8848383
          },
          {
            "age":"22-30",
            "population":8384390
          },
          {
            "age":"30-44",
            "population":14106543
          },
          {
            "age":"45-64",
            "population":8819342
          },
          {
            "age":"≥65",
            "population":800000
          }
        ]

        var width = 1060,
            height = 600,
            radius = 175,
            color = d3.scale.category10(),
            legendNo=4,    // number of legends to display at a time
            legendCount=0; //To store number of legends

        //creating svg element  and appending to body
        var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");  //transform it to center of body

        //creating start and end angle for each arc
        var pie = d3.layout.pie()
            .sort(null)
            .value(function(d) { return d.population; });

        //creating the arcs based on pie layout
        var arc = d3.svg.arc()      //inner arc with color                  
            .outerRadius(radius)
            .innerRadius(radius-70);

        //calculate the total to display in hole
        var total=0;

            data.forEach(function(d) {
            d.population;
            total +=parseInt(d.population);
            legendCount++;
         });

        //creating svg element for center text
        var center_group = svg.append("svg:g")
            .attr("class", "center_group")
            .attr("transform", "translate(" + (width/2) + "," + (height/2) + ")");

        //selecting all inner arcs and appending data
        var g = svg.selectAll("arc")
            .data(pie(data))
            .enter().append("g")
            .attr("class", "arc")

        //giving colour to each inner arc and execute onClick function
        g.append("path")
            .attr("d", arc)
            .style("fill", function(d) { return color(d.data.age); })

        //display text in the inner arcs
        g.append("text")
            .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
            .attr("dy", ".35em")
            .style("text-anchor", "middle")
            .style("font-size", "14px")
            .text(function(d) { return d.data.age; });

        count = 0;
        var p=0;
        var viewdata = data.slice(p,p+legendNo);
        var hidedata;
        var temp;
        //selecting all legend elements
        var legend = svg.selectAll(".legend")
            .data(viewdata).enter()
            .append("g").attr("class", "legend")
            //.attr("width", )
            .attr("id", function() {
                  return count++;
            })
              .attr("transform", function(d, i) {
                  return "translate("+(-(width/2-30)+ i * 50)+"," + (height/2-50)+ ")";
              })

        //appending coloured rectangles to legend     
        svg.selectAll("rect")
        .data(viewdata)
        .enter().append("rect")
            .attr("x", width/2-150)
            .attr("y",5)
            .attr("dy", "3.00em")
            .attr("dx", "1.75em")
            .attr("width", 23).attr("height", 23)
            .attr("transform", function(d, i) {
                return "translate("+(-(width/2-30)+ i * 50)+"," + (height/2-50)+ ")";
            })
            .style("fill", function(d) {
                return color(d.age);
            });

        var prev=svg.append("svg:text")
            .attr("id","prev")
            .attr("x", width-1260)
            .attr("y",height-385)
            .attr("dy", "2.90em")
            .attr("dx", "1.75em")
            //.attr("stroke", "black")
            //.style("fill","white")
           // .style("text-anchor", "middle")
            .style("font-size", "20px")
            //.attr("width", 45).attr("height", 25)
            .text("<|")
            .on("click",onPrevClick)
        var next=svg.append("svg:text")
            .attr("id","next")
            .attr("x", width-950)
            .attr("y",height-385)
            .attr("dy", "2.90em")
            .attr("dx", "1.75em")
            .style("font-size", "20px")
            //.attr("stroke", "black")
            //.style("fill","white")
            //.attr("width", 45).attr("height", 25)
            .text("|>")
            .on("click",onNextClick)

        function onNextClick()
        {p+=legendNo;
        if(p>=legendCount){
        p-=legendNo;
        viewdata = data.slice(p,legendCount);
        //temp=legendNo-(legendCount-p);
        //hidedata =data.slice(p-temp-2,p-2);
        }
        else{
        viewdata = data.slice(p,p+legendNo);
        //hidedata =data.slice(0,0);
        }
        svg.selectAll("rect")
        .data(viewdata)

            .attr("x", width/2-150)
            .attr("y",5)
            .attr("dy", "3.00em")
            .attr("dx", "1.75em")
            .attr("width", 23).attr("height", 23)
              .attr("transform", function(d, i) {
                  return "translate("+(-(width/2-30)+ i * 50)+"," + (height/2-50)+ ")";
              })

            .style("fill", function(d) {
                return color(d.age);
            });

            legend.select("text").attr("x", width/2-150)
            .data(viewdata)
            .attr("y", 15)
            .attr("dy", "3.00em")
            .attr("dx", "1.75em")
            //.attr("transform", function(d, i) {return "rotate("+45*i+","+d.age+",200)";})
            .attr("text-anchor", "middle").text(function(d) {
              return d.age;

            });
        }
        function onPrevClick(){
        p-=legendNo;
        if(p<=0){
        p=0;
        }
        viewdata = data.slice(p,p+legendNo);

        svg.selectAll("rect")
        .data(viewdata)

            .attr("x", width/2-150)
            .attr("y",5)
            .attr("dy", "3.00em")
            .attr("dx", "1.75em")
            .attr("width", 23).attr("height", 23)
              .attr("transform", function(d, i) {
                  return "translate("+(-(width/2-30)+ i * 50)+"," + (height/2-50)+ ")";
              })

            .style("fill", function(d) {
                return color(d.age);
            });

            legend.select("text").attr("x", width/2-150)
            .data(viewdata)
            .attr("y", 15)
            .attr("dy", "3.00em")
            .attr("dx", "1.75em")
            //.attr("transform", function(d, i) {return "rotate("+45*i+","+d.age+",200)";})
            .attr("text-anchor", "middle").text(function(d) {
              return d.age;
            });
        }



        // giving text to legends
        legend.append("text").attr("x", width/2-150)
            .data(viewdata)
            .attr("y", 15)
            .attr("dy", "3.00em")
            .attr("dx", "1.75em")
            //.attr("transform", function(d, i) {return "rotate("+45*i+","+d.age+",200)";})
            .attr("text-anchor", "middle").text(function(d) {
              return d.age;
            });
        //displaying legend title
        var legendTitle = svg.append("svg:text")
            .attr("x", -(width/2-200))
            .attr("y", height/2-25)
            .style("font-size", "14px")
            .style("text-decoration", "underline")
            .text("Age Group");