Question

我是JQuery和CSV解析方面的新手，而且我很难尝试这样做。

我的CSV文件是由Javascript从另一页的HTML表格中生成和下载的：

var table = document.getElementById("mytableid").innerHTML;
var data = table.replace(/<thead>/g, '')
.replace(/<\/thead>/g, '') 
.replace(/<tbody>/g, '') 
.replace(/<\/tbody>/g, '')
.replace(/<tr>/g, '') 
.replace(/<\/tr>/g, '\r\n')
.replace(/<th>/g, '') 
.replace(/<\/th>/g, ',')
.replace(/<td>/g, '') 
.replace(/<\/td>/g, ',')
.replace(/\t/g, '');
.replace(/\n/g, '');
var mylink = document.createElement('a');
mylink.download = "mycsvfile.csv";
mylink.href = "data:application/csv," + escape(data);
mylink.click();

下载正确。在我要显示CSV下载文件的页面中，我的脚本如下：

d3.text("mycsvfile.csv", function(datasetText) {
var parsedCSV = d3.csv.parseRows(datasetText);
var sampleHTML = d3.select("#divid")
.append("table")
.selectAll("tr")    
.data(parsedCSV)
.enter().append("tr")
.selectAll("td")
.data(function(d){return d;})
.enter().append("td")  
.text(function(d){return d;})
});

它正确显示了CSV表，除了右边显示的是一个空白列（原始文件中不存在），好像它在每个tr中创建了一个最后一个空白td 。此外，它似乎没有检测到我的情况：它显示它们就像普通的td一样。

有关为何会发生这种情况以及如何解决问题的任何想法？提前谢谢！

Answer 1

这里有一些问题，比如这个问题：

此外，它似乎没有检测到我的情况：它显示它们就像普通的td一样。

您的代码中没有th。除此之外，链接不正确。

话虽如此，我认为使用D3附加表格的最佳方式是明确定义谁是头，谁是身体，谁是行，谁是细胞。

所以，假设你有这个假数据：

foo,bar,baz
21,43,55
32,77,65
12,66,42
42,88,42

首先，让我们定义组件：

var body = d3.select("body");
var table = body.append('table')
var thead = table.append('thead')
var tbody = table.append('tbody');

要打印表格标题，我们会使用Object.keys()

获取CSV中的标题行

var headers = Object.keys(datasetText[0]);

然后我们展示它：

var head = thead.selectAll('th')
    .data(headers)
    .enter()
    .append('th')
    .text(function (d) { return d; });

现在，对于表的主体，我们创建行：

var rows = tbody.selectAll('tr')
    .data(datasetText)
    .enter()
    .append('tr');

然后我们使用Object.values()创建单元格：

var cells = rows.selectAll('td')
    .data(function (d) {
        return Object.values(d);
    })
    .enter()
    .append('td')
    .text(function (d) { return d; });

请注意，Object.values() 对IE，Safari或Opera（目前仅限Chrome和Firefox）无效。您可以使用polyfill或等效函数，例如for...in循环：

    var cells = rows.selectAll('td')
    .data(function(d) {
        var arr = [];
        for (var i in d) {
            arr.push(d[i])
        }
        return arr;
    })
    .enter()
    .append('td')
    .text(function(d) { return d;});

这是Plunker：https://plnkr.co/edit/kanrGplVfirTgc5Qm2lc?p=preview

并且，为了避免plunker作为外部链接，这里是使用SO片段的相同代码（我必须在相应的对象数组中转换CSV，因为在SO片段中加载CSV很复杂）：

＆＃13;

var datasetText = [{
    foo: 32,
    bar: 43,
    baz: 31
}, {
    foo: 12,
    bar: 88,
    baz: 11
}, {
    foo: 33,
    bar: 88,
    baz: 21
}, {
    foo: 17,
    bar: 33,
    baz: 42
}];

var body = d3.select("body");

var headers = Object.keys(datasetText[0]);

var table = body.append('table')
var thead = table.append('thead')
var tbody = table.append('tbody');

var head = thead.selectAll('th')
    .data(headers)
    .enter()
    .append('th')
    .text(function(d) {
        return d;
    });

var rows = tbody.selectAll('tr')
    .data(datasetText)
    .enter()
    .append('tr');

var cells = rows.selectAll('td')
    .data(function(d) {
        return Object.values(d);
    })
    .enter()
    .append('td')
    .text(function(d) {
        return d;
    });

＆＃13;

.table-fill {
  background: white;
  border-radius:3px;
  border-collapse: collapse;
  height: 320px;
  margin: auto;
  max-width: 600px;
  padding:5px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
}
 
th {
  color:#D5DDE5;;
  background:#1b1e24;
  border-bottom:4px solid #9ea7af;
  border-right: 1px solid #343a45;
  font-size:23px;
  font-weight: 100;
  padding:10px;
  text-align:left;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align:middle;
}

th:first-child {
  border-top-left-radius:3px;
}
 
th:last-child {
  border-top-right-radius:3px;
  border-right:none;
}
  
tr {
  border-top: 1px solid #C1C3D1;
  border-bottom-: 1px solid #C1C3D1;
  color:#666B85;
  font-size:16px;
  font-weight:normal;
  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
 
tr:hover td {
  background:#4E5066;
  color:#FFFFFF;
  border-top: 1px solid #22262e;
  border-bottom: 1px solid #22262e;
}
 
tr:first-child {
  border-top:none;
}

tr:last-child {
  border-bottom:none;
}
 
tr:nth-child(odd) td {
  background:#EBEBEB;
}
 
tr:nth-child(odd):hover td {
  background:#4E5066;
}

tr:last-child td:first-child {
  border-bottom-left-radius:3px;
}
 
tr:last-child td:last-child {
  border-bottom-right-radius:3px;
}
 
td {
  background:#FFFFFF;
  padding:10px;
  text-align:left;
  vertical-align:middle;
  font-weight:300;
  font-size:18px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #C1C3D1;
}

td:last-child {
  border-right: 0px;
}

th.text-left {
  text-align: left;
}

th.text-center {
  text-align: center;
}

th.text-right {
  text-align: right;
}

td.text-left {
  text-align: left;
}

td.text-center {
  text-align: center;
}

td.text-right {
  text-align: right;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

使用d3.js

1 个答案: