如何创建Javascript表格镜头

我需要以Table Lens格式为数据创建一个视图，我的想法是使用这个库，因为我需要用javascript完成它。我想知道是否有人已经开发了一些东西，可以提供帮助

---

此链接显示了一个表格镜头示例：（本文中）

已解决：

我正在使用此代码解决问题：

var dadosRecursos = [
  {
       created_at: "2015-05-04T22:30:52.000Z", 
       curso_id: 13,
       fullname: "Vis. Curso 13",
       id: 149
  },
  { 
       created_at: "2015-05-04T22:30:52.000Z",
       curso_id: 13,
       fullname: "Recurso"id: 150,
  }];

var dadosTableLens = [
   {
       R149: 40,
       R150: 40,
       R151: 40,
       R152: 40,
       R153: 40,
       R154: 40,
       R155: 40,
       Ranalises: 140,
       aluno_id: 147
   },{
       R149: 30,
       R150: 20,
       R151: 40,
       R152: 70,
       R153: 40,
       R154: 80,
       R155: 40,
       Ranalises: 150,
       aluno_id: 144
   },
   {
       R149: 10,
       R150: 40,
       R151: 30,
       R152: 40,
       R153: 50,
       R154: 40,
       R155: 70,
       Ranalises: 100,
       aluno_id: 150
}];

var defHeight = 2;
var augHeight = 10;
var rRecs     = ["Ranalises"];

for (var i = 0; i <= dadosRecursos.length - 1; i++) {
    rRecs.push("R"+dadosRecursos[i].id);
};

d3.selectAll("thead td").data(rRecs).on("click", function(k) {
    d3.event.preventDefault();
    tr.sort(function(first, last) { 
        if (first[k] > last[k])
            return -1;
        else if (first[k] < last[k])
            return 1;
        else
            return 0;
    })
});

var tr = d3.select("tbody").selectAll("tr")
.data(dadosTableLens)
.enter()
  .append("tr")
  .attr("id", function(d){ return "A"+d.aluno_id; })

    .on("click", function(k, p) {
        d3.event.preventDefault();
        clicked(k, p);
    });

    tr.append("th")
        .html(function(d) { return "<span>"+d.aluno_id+"</span>" })
        .attr("class", "texto");

    tr.selectAll("td")
        .data(function(d) { return rRecs.map(function(k) { return d[k]; }); })
    .enter()
      .append("td")
        .append("svg")
                .attr("width", ($("._content-head").width()/(dadosRecursos.length+1.4)))
                .attr("height", defHeight)
            .append("rect")
                .attr("height", defHeight)
                .attr("width", function(d) { return d; });
}

var clicked = function(d, i){
var oldClick = d3.selectAll(".highlight");

  oldClick.classed("highlight", false);
oldClick
    .selectAll("rect")
    .attr("height", defHeight);

  oldClick          
    .selectAll("svg")
    .attr("height", defHeight)

nowClick = d3.select("tr#A"+d.aluno_id);

  nowClick.classed("highlight", true);
nowClick
    .selectAll("rect")
    .attr("height", augHeight);

  nowClick          
    .selectAll("svg")
    .attr("height", augHeight);

var-dadosrecursoros=[
{
创建时间：“2015-05-04T22:30:52.000Z”，
卡索编号：13，
全名：“Vis.Curso 13”，
身份证号码：149
},
{ 
创建时间：“2015-05-04T22:30:52.000Z”，
卡索编号：13，
全名：“递归”id:150，
}];
可变数据可变透镜=[
{
R149:40，
R150:40，
R151:40，
R152:40，
R153:40，
R154:40，
R155:40，
Ranalises:140，
aluno_id:147
},{
R149:30，
R150:20，
R151:40，
R152:70，
R153:40，
R154:80，
R155:40，
拉纳利斯：150，
aluno_id:144
},
{
R149:10，
R150:40，
R151:30，
R152:40，
R153:50，
R154:40，
R155:70，
拉纳利斯：100，
aluno_id:150
}];
var-defHeight=2；
高度=10；
var rRecs=[“Ranalises”]；
对于（var i=0；i最后[k]）
返回-1；
else if（第一个[k]<最后一个[k]）
返回1；
其他的
返回0；
})
});
var tr=d3.选择（“tbody”）.选择全部（“tr”）
.数据（数据稳定透镜）
.输入（）
.附加（“tr”）
.attr（“id”，函数（d）{return“A”+d.aluno_id；}）
.on（“点击”），功能（k，p）{
d3.event.preventDefault（）；
（k，p）；
});
tr.append（“th”）
.html（函数（d）{return”“+d.aluno\u id+”“}）
.attr（“类”、“文本”）；
tr.selectAll（“td”）
.data（函数（d）{return rRecs.map（函数（k）{return d[k]；}）；}）
.输入（）
.附加（“td”）
.append（“svg”）
.attr（“宽度”（$（“.u内容头”）.width（）/（dadosRecursos.length+1.4）））
.attr（“高度”，定义高度）
.append（“rect”）
.attr（“高度”，定义高度）
.attr（“宽度”，函数（d）{返回d；}）；
}
变量=函数（d，i）{
var oldClick=d3。选择全部（“.highlight”）；
oldClick.classed（“突出显示”，false）；
老一套
.selectAll（“rect”）
.attr（“高度”，定义高度）；
老一套
.selectAll（“svg”）
.attr（“高度”，定义高度）
现在点击=d3。选择（“tr#A”+d.aluno_id）；
nowClick.classed（“突出显示”，true）；
现在点击
.selectAll（“rect”）
.attr（“高度”，aughight）；
现在点击
.selectAll（“svg”）
.attr（“高度”，aughight）；

---

谢谢！

很好，会出现一个快速搜索。一般来说，stackoverflow更适合于特定的问题，而不是一般的查询。大多数人都希望您在问题中发布一些实际的代码，因为他们希望看到您在求助于其他人之前已经做了一些努力。您的问题可能会因此而被否决儿子（虽然不是我，但我不反对投票。）谢谢@StephenThomas！因为我没有找到包含我需要的内容的网站，所以我决定发布没有这些内容的代码。在你提到的两个参考资料中，数据集看起来更像我需要的，但我需要的是，当点击该行时，它会被扩展。我正在编写一个代码来更新我的问题。。。。