javascript - 使用 D3.js 进行分页

Question

我正在为 D3 条形图使用来自 API 的大量 JSON 数据。我想一次只显示 10-20 条。有没有办法使用 D3 进行分页，或者我需要用另一种方式（php）吗？欢迎任何最佳实践或建议。

Answer 1

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

我将通过创建仅包含您希望在特定时间显示的数据的第二个数组来在 d3 中创建分页。这个切片数组将来自您的主数据数组。通过控制数组的切片位置，您可以控制分页。

我在这里创建了一个简单的示例，其中将一个长数组划分为五个栏的“页面”。

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

Answer 2

请仔细阅读这段代码，但如果你通过我的代码块，它是有意义的。我只放了代码的基本部分。链接：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);
            }