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

multidimensional array slice multiple html tables and navigation d3.js

本文关键字：导航 d3 js HTML 数组 切片      更新时间：2023-09-26

我的意图是得到长文件。csv数据到几个html表与500行每个。示例:.csv中的5000行创建10个表，每个表具有不同的内容(即行0-500,500 - 1000，…);还有:10个链接到表

任务:切片数组以获取每个单独表的数据。

基本'伪'代码:

//创建链接

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);
});

我想为每个链接附加一个事件处理程序:

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

我不知道如何以编程方式分配变量"startslice,stopslice"，以便每个链接都有自己的值。

我的意图是在d3.js中这样做。

我最终选择了以下解决方案:

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); 
    });

在这里，我使用'+ I '来获得一个变量，该变量在每次调用数据集时增加。我的数据集不包含任何我可以使用的数据。

'start'和'stop'传递给绘制HTML表格的'tabulate'函数中的data.slice(start,stop)。

这给了我想要的效果:每个链接调用数据集的不同切片。

相关文章：