使用d3.js创建HTML表格之类的矩阵

时间:2014-04-10 21:50:21

标签: javascript matrix d3.js

我想创建一个没有数值的矩阵表。 1.我有一个数据库表:

| CODE |  STIL |  SUBSTIL |  PRODUS |
|------|-------|----------|---------|
|  R   | stil1 | substil1 | produs1 |
|  R   | stil1 | substil2 | produs2 |
|  T   | stil1 | substil3 | produs3 |
|  T+  | stil2 | substil4 | produs4 |
|  G   | stil2 | substil4 | produs5 |
|  R   | stil3 | substil5 | produs6 |
|  R   | stil4 | substil6 | produs7 |
  1. 从这个表中我可以得到一个jsonfile:

    var data = [ {"code": "R","stil": "stil1","substil": "substil1","produs": "produs1"}, {"code": "R","stil": "stil1","substil": "substil2","produs": "produs2"}, {"code": "T","stil": "stil1","substil": "substil3","produs": "produs3"}, {"code": "T+","stil": "stil2","substil": "substil4","produs": "produs4"}, {"code": "G","stil": "stil2","substil": "substil4","produs": "produs5"}, {"code": "R","stil": "stil3","substil": "substil5","produs": "produs6"}, {"code": "R","stil": "stil4","substil": "substil6","produs": "produs7"} ];

  2. 我希望最终结果像这样的表:

    | CODE |            stil1            |  stil2   |   stil3  |   stil4  |
    |      | substil1 | substil2 | substil3  | substil4 | substil5 | substil6 |
    |------|----------|----------|-----------|----------|----------|----------|
    |  R   | produs1  |          |           |          |          |          |
    |  R   |          | produs2  |           |          |          |          |
    |  R   |          |          |           | produs6  |          |          |
    |  R   |          |          |           |          |          | produs7  |
    |  T   |          |          |  produs3  |          |          |          |
    |  T+  |          |          |           | produs4  |          |          |
    |  G   |          |          |           | produs5  |          |          |
    

    我尝试使用此

    http://bost.ocks.org/mike/nest/

    http://bl.ocks.org/mbostock/844752

    recursively (or iteratively) make a nested html table with d3.js?

    感谢您的任何提示。

1 个答案:

答案 0 :(得分:0)

请参阅Creating a table linked to a csv file,但是从提供的jsfiddle开始工作,因为数据结构非常相似...... http://jsfiddle.net/7WQjr/

如果您的数据直接来自请求,您可以:

d3.json(url, function(data) {
    code from the jsfiddle making the table goes here
})