多维数组切片多个html表和导航d3.js

Question

My intent is to a get long file.csv data into several html tables with 500 rows each. Example: 5000 rows in the .csv create 10 tables, each with different content ( that is row 0-500, 500 - 1000, ...); also: 10 links to reach the tables.

Task: slice the array to get the data(data) for each individual table.

Basic 'pseudo'-code so far:

// creating links

var rowli = boxlist.selectAll("li")
                .data(groups)
                .enter()
                .append("li")
                .append("div")
                .text(function(d) {return d.length;})
                .on("click",Slide);
                .on("mousedown",tabulate(startslice=0,stopslice=500);

//function that draws table:

function tabulate(data, groups,startslice, stopslice) {

var boxlist = d3.select("#ul_id")
                .append("ul")

// create links with popout transition, target is view-select.


//create table

var table = d3.select("#container").append("table"),
    tbody = table.append("tbody");

// create a row for each object in the data

var rows = tbody.selectAll("tr")
    .data(data.slice(startslice,stopslice)
    .enter()
    .append("tr")

// each row appends td

  rows.append("td")
    .html(function(d) { return d[0];});
return table;
};

// render the table

var peopleTable = d3.text("data.csv", function(data) {

var arrofarrays = d3.csv.parseRows(data);

var groupsize = 500;
var groups = arrofarrays.map(function(item, index){
  return index % groupsize === 0 ? arrofarrays.slice(index, index+groupsize) : null;})
.filter(function(item) {return item;});

var peopleTable = tabulate(arrofarrays, groups);

}); 

I want to attach an event handler to each link:

function sliceArray (startslice,stopslice) {
 arrofarrays.slice(startslice,stopslice);
};

I cannot figure out how to assign the variables "startslice,stopslice" programmatically so that each link will have its own values.

My intent is to do this in d3.js.

Answer 1

I finally chose the following solution:

var rowli = boxlist.selectAll("li")
                .data(groups)
                .enter()
                .append("li")
                .append("div")
                .attr("class","innerLi")
                .attr("data-vin","view-select")
                .attr("data-sd","popout")
                .attr("id",function(d, i){var result='a'+i; return result; })
                .text(function(d) {return d.length;})
                .on("click",Slide);

     boxlist.selectAll("div").on("mousedown",function(d,i) { 
        tabulate (arrofArro, groups, start=+i*groupsize, stop=(+i+1)*groupsize); 
    });

Here, I use '+i' to get a variable that increases each time that the dataset is called. My dataset does not contain any data that I could have used.

'start' and 'stop' are passed to data.slice(start,stop) inside the 'tabulate' function that draws the html table.

This gives me the desired effect: each link calls a different slice of the dataset.