分页与D3.js(Pagination with D3.js)

我使用从D3条形图的API大量的JSON数据。我想显示在同一时间只有10-20条。有没有办法使用D3进行分页或做我需要做的另一种方式（PHP）？任何最佳做法或建议，欢迎。

Answer 1:

我知道这是一个迟到的问题，但也许这仍然可以帮助你。

我将通过创建仅包含要在特定时间显示的数据的第二阵列创建D3分页。这片阵列将来自您的主要数据阵列。通过控制其中数组切片，您可以控制分页。

我创建了一个简单的例子，这里有很长的阵列分为五栏“页”。

http://jsfiddle.net/zNxgn/2/

Answer 2:

请去thorugh这段代码，但它是有道理的，如果你通过我的块。我只把代码的重要组成部分。链接： http://bl.ocks.org/pragyandas

  var legendCount = data.series.length; var legendWidth=10; var legendSpacing=6; var netLegendHeight=(legendWidth+legendSpacing)*legendCount; var legendPerPage,totalPages,pageNo; if(netLegendHeight/height > 1){ legendPerPage=Math.floor(height/(legendWidth+legendSpacing)); totalPages=Math.ceil(legendCount/legendPerPage); pageNo=1; var startIndex=(pageNo-1)*legendPerPage; var endIndex=startIndex+legendPerPage; var seriesSubset=[],colorSubset=[]; for(var i=0;i<data.series.length;i++){ if(i>=startIndex && i<endIndex){ seriesSubset.push(data.series[i]); colorSubset.push(colors[i]); } } DrawLegendSubset(seriesSubset,colorSubset,legendPerPage,pageNo,totalPages); } function DrawLegendSubset(seriesSubset,colorSubset,legendPerPage,pageNo,totalPages){ var legend = svg.selectAll("g.legendg") .data(seriesSubset) .enter().append("g") .attr('class','legendg') .attr("transform", function (d, i) { return "translate(" + (width-40) + ","+ i*(legendWidth+legendSpacing) +")"; }); legend.append("rect") .attr("x", 45) .attr("width", legendWidth) .attr("height", legendWidth) .attr("class", "legend") .style('fill',function(d,i){return colorSubset[i];}); legend.append("text") .attr("x", 60) .attr("y", 6) .attr("dy", ".35em") .style("text-anchor", "start") .text(function (d) { return d.name; }); var pageText = svg.append("g") .attr('class','pageNo') .attr("transform", "translate(" + (width+7.5) + ","+ (legendPerPage+1)*(legendWidth+legendSpacing) +")"); pageText.append('text').text(pageNo+'/'+totalPages) .attr('dx','.25em'); var prevtriangle = svg.append("g") .attr('class','prev') .attr("transform", "translate(" + (width+5) + ","+ (legendPerPage+1.5)*(legendWidth+legendSpacing) +")") .on('click',prevLegend) .style('cursor','pointer'); var nexttriangle = svg.append("g") .attr('class','next') .attr("transform", "translate(" + (width+20) + ","+ (legendPerPage+1.5)*(legendWidth+legendSpacing) +")") .on('click',nextLegend) .style('cursor','pointer'); nexttriangle.append('polygon') .style('stroke','#000') .style('fill','#000') .attr('points','0,0, 10,0, 5,5'); prevtriangle.append('polygon') .style('stroke','#000') .style('fill','#000') .attr('points','0,5, 10,5, 5,0'); if(pageNo==totalPages){ nexttriangle.style('opacity','0.5') nexttriangle.on('click','') .style('cursor',''); } else if(pageNo==1){ prevtriangle.style('opacity','0.5') prevtriangle.on('click','') .style('cursor',''); } } function prevLegend(){ pageNo--; svg.selectAll("g.legendg").remove(); svg.select('.pageNo').remove(); svg.select('.prev').remove(); svg.select('.next').remove(); var startIndex=(pageNo-1)*legendPerPage; var endIndex=startIndex+legendPerPage; var seriesSubset=[],colorSubset=[]; for(var i=0;i<data.series.length;i++){ if(i>=startIndex && i<endIndex){ seriesSubset.push(data.series[i]); colorSubset.push(colors[i]); } } DrawLegendSubset(seriesSubset,colorSubset,legendPerPage,pageNo,totalPages); } function nextLegend(){ pageNo++; svg.selectAll("g.legendg").remove(); svg.select('.pageNo').remove(); svg.select('.prev').remove(); svg.select('.next').remove(); var startIndex=(pageNo-1)*legendPerPage; var endIndex=startIndex+legendPerPage; var seriesSubset=[],colorSubset=[]; for(var i=0;i<data.series.length;i++){ if(i>=startIndex && i<endIndex){ seriesSubset.push(data.series[i]); colorSubset.push(colors[i]); } } DrawLegendSubset(seriesSubset,colorSubset,legendPerPage,pageNo,totalPages); }