のみd3.js私が把握しようとしている何

Question

とcsvファイルからのデータの20行を表示フルをロードした後、CSVファイルからのデータの最初の20行を取るスクリプトを作成する方法です3000以上のエントリを持つCSVファイルは、棒グラフで一度に20件ずつ表示します。そうすれば、一度にすべての3000のバーが表示されるのではなく、毎回20行のデータの間を行き来する2つのボタンを持つことができ、グラフを読みにくくすることができます。 CSVは、20のグループにファイルをカットアップし、次のCSVを使用して、「次へ」をクリックするたびにファイルをロードする

ショート、私もこれを行うことについては移動するかどうかはわかりません。

Answer 1

データビズのタイプ（棒グラフなど）によっては、3000個のアイテムが間違っています。ただし、ファイルサイズに関してはそれほど多くはありません。

言われていること、代わりに、単一のCSVで、一度に20行、負荷すべて項目に複数のファイルでそれを切断し、（あなたの質問のタイトルが言うことである）のみ各20時間を表示します。

sliceを使用して、データ配列をカットするには：必要に応じて以来のため、答えをコピーし、

var body = d3.select("body"); 
 
body.append("p").html("ID -- VALUE<br>"); 
 
var index = 0 
 

 
d3.csv("https://gist.githubusercontent.com/ffishman/a8cd485c44bee39b68c7a5c7fad14f17/raw/fad1cd9a10f313c06ec65bd8ab289c818536681c/flare.csv", function(data) { 
 
    d3.select("#bt2").on("click",() => { 
 
    var newData = data.slice(index, index + 20); 
 
    index += 20; 
 
    update(newData); 
 
    }) 
 

 
    d3.select("#bt1").on("click",() => { 
 
    index -= 20; 
 
    var newData = data.slice(index - 20, index); 
 
    update(newData) 
 
    }) 
 

 
    function update(newData) { 
 
    var par = body.selectAll(".par") 
 
     .data(newData, d => d.id); 
 

 
    par.exit().remove(); 
 

 
    par.enter() 
 
     .append("p") 
 
     .attr("class", "par") 
 
     .merge(par) 
 
     .html(d => d.id + " -- " + d.value) 
 
    } 
 
})

p { 
 
    margin: 2px; 
 
}

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<button id="bt1">Previous 20</button> 
 
<button id="bt2">Next 20</button>