Как создать Javascript Table Lens

Question

Мне нужно создать представление данных в формате Table Lens, моя идея - использовать библиотеку d3js.org, потому что мне нужно, чтобы это было сделано в javascript. Интересно, кто-то уже что-то разработал и может помочь.

Эта ссылка показывает пример Таблица объектива: http://complexdatavisualized.com/wp-content/uploads/2013/01/table-lens.gif (в этой статье http://www.ramanarao.com/papers/tablelens-chi94.pdf)

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

Спасибо'S!