如何创建 Javascript Table Lens答案

【问题标题】：How to create a Javascript Table Lens如何创建 Javascript Table Lens
【发布时间】：2015-07-13 05:16:48
【问题描述】：

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

此链接显示了一个 Table Lens 示例：http://complexdatavisualized.com/wp-content/uploads/2013/01/table-lens.gif（本文为 http://www.ramanarao.com/papers/tablelens-chi94.pdf）

【问题讨论】：

好吧，快速搜索出现this 和this。一般来说，stackoverflow 更适合特定问题而不是一般查询。大多数人会希望您在问题中发布一些实际代码，因为他们希望看到您在求助于其他人之前已经做出了一些努力。由于这个原因，您的问题可能会被否决（尽管不是我；我不会投反对票。）
感谢@StephenThomas！因为我没有找到包含我需要的内容的网站，所以我决定在没有它的情况下发布代码。在你说的两个引用中，数据条看起来更像我需要的，但我需要在点击该行时，将其展开。我正在编写代码来更新我的问题....

标签： javascript d3.js information-visualization

【解决方案1】：

已解决：

我正在用这段代码解决问题：

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

谢谢！

【讨论】：