javascript - 如何创建 Javascript 桌面镜头

Question

我需要为 Table Lens 格式的数据创建一个 View ，我的想法是使用 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);

谢谢!