D3 棒グラフの API から大量の JSON データを使用しています。一度に 10 ~ 20 本のバーのみを表示したいと考えています。D3 を使用してページネーションする方法はありますか、それとも別の方法 (php) で行う必要がありますか? ベストプラクティスや提案は大歓迎です。
4800 次
2 に答える
7
これは遅い質問であることは知っていますが、これはまだあなたを助けることができます.
特定の時間に表示するデータのみを含む 2 つ目の配列を作成することで、d3 でページネーションを作成します。このスライスされた配列は、プライマリ データ配列から取得されます。配列がスライスされる場所を制御することで、ページネーションを制御します。
ここでは、長い配列を 5 つのバーの「ページ」に分割した簡単な例を作成しました。
于 2012-09-11T02:13:17.170 に答える
0
このコードの一部を調べてください。ただし、私のブロックを調べれば意味があります。コードの重要な部分だけを入れました。リンク: 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);
}
于 2015-01-09T15:59:29.440 に答える