d3.js僅加載部分數據/同步數據

Question

我有非常多的數據，我將其繪製爲堆積條形圖。我的測試數據大約500k JSON-Objects（= 10萬個堆疊段的50k行）大。

我的問題是，我不知道如何只加載部分數據。它顯示在瀏覽器中，寬度大約在1200到1920像素之間。 我正在使用比例來計算線條大小。但是，如果我爲窗口寬度設置比數據大小更小的值，則d3.js會計算每行的寬度爲0，這意味着不顯示任何內容。 所以，我必須設置50k的寬度來顯示所有內容，但這有點不切實際 - 它讓瀏覽器崩潰，它只在我使用大約10k的數據時才起作用，然後設置寬度10k px。第二件事是它真的需要很長時間（5秒）才能渲染。

1.）我如何獲取這些數據並將其顯示在width = 1920的窗口中？如果我正在移動箭頭鍵或概覽圖表 - 加載其他數據？

2.）如何同步數據？例如：如果我有一個長滑塊，這個滑塊應該確定我感興趣的數據。所以，範圍是從0到50k，然後我滑動它，並在〜4000。我想在圖表中跳到那個位置。

dataset = data; 
    var stack = d3.layout.stack(); 
    stack(dataset); 

    var x= d3.scale.ordinal() 
      .domain(d3.range(dataset[0].length)) 
      .rangeRoundBands([0, w]); 

    var y= d3.scale.linear() 
      .domain([0, 1]) 
      .range([0, h]); 

    var svg = d3.select("body") 
      .append("svg") 
      .attr("width", w) 
      .attr("height", h); 

    var groups = svg.selectAll("g") 
        .data(dataset) 
        .enter() 
        .append("g"); 

    var rects = groups.selectAll("rect") 
        .data(function (d) { 
         return d; 
        }) 
        .enter() 
        .append("rect") 
        .attr("x", function (d, i) { 
         return x(i); 
        }) 
        .attr("y", function (d) { 
         return y(d.y0 + d.y); 
        }) 
        .attr("height", function (d) { 
         return h - y(d.y0); 
        }) 
        .attr("width", x.rangeBand()) 
        .attr("fill", function (d, i) { 
         return color(i); 
        }); 

Answer 1

您可以使用slice方法來對數據進行子集分析。這並不會減少數據加載。但是給你一種方法來減少你一次畫在圖上的小節的數量。

data = all_data.slice(start_index, end_index); 

然後根據你想顯示什麼數據集start_index和end_index。您可以添加一個事件偵聽器，爲此，回調函數會更改開始和結束索引。

var refresh(){ 
    data = all_data.splice(start_index, end_index) 
    //your code to redraw the graph using updated indices goes here 
} 

d3.select("body") 
    .on("keydown", function() { 
     if(d3.event.keyCode == 37){ 
      //left key press 
      start_index = start_index - 4000; 
      end_index = end_index-4000; 
      if (start_index < 0){ 
       //handle boundary case 
       start_index = 0; 
       end_index = 4000; 
      } 
      refresh(); 
     } 
     else if(d3.event.keyCode == 39){ 
      //right key press 
      start_index = start_index + 4000; 
      end_index = end_index + 4000; 
      if (end_index > all_data.length){ 
       start_index = all_data.length-4000; 
       end_index = all_data.length; 
      } 
      refresh(); 
     } 
    });