Разбиение легенд

Question

Фактически я работаю над диаграммами D3js. Я реализовал разбиение на страницы в легендах, но в конце есть две легенды, которые повторяются. как я должен это исправить ?? Я предоставил скрипку для моего текущего кода здесь. jsfiddle link

Заранее спасибо за любую помощь

   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"); 

Answer 1

Работа демо: http://jsfiddle.net/m6cx7/6/

Вы должны обращаться enter и exit из легенд о каждом Next и Prev клик:

var rects = svg.selectAll("rect") 
    .data(viewdata); 

rects.enter() 
    .append('rect'); 

rects.exit() 
    .remove(); 

rects 
    .attr("x", width/2-150) 
    .attr("y",5) 
    // ... 



var legends = svg.selectAll(".legend") 
    .data(viewdata); 

legends.enter() 
    .append('g') 
    .classed('legend', true) 
    .attr("id", function() { 
      return count++; 
    }) 
    .attr("transform", function(d, i) { 
      return "translate("+(-(width/2-30)+ i * 50)+"," + (height/2-50)+ ")"; 
    }) 
    .append('text'); 

legends.exit() 
    .remove(); 

legends 
    .select('text') 
    .attr('x', width/2-150) 
    // ...