Javascript 使用d3.js将CSV解析为HTML表时出现问题

我是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表，除了在右侧显示一个空白列（原始文件中不存在）之外，就好像它在每个tr中创建了最后一个空白td。此外，它似乎没有检测到我的th：它将它们显示为普通td

有没有想过为什么会发生这种情况以及我如何解决？

---

提前谢谢

这里有一些问题，比如：

而且，它似乎没有检测到我的th：它显示它们和普通的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 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（）

创建单元格：

请注意，

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作为外部链接，下面是使用SO代码段的相同代码（我必须在相应的对象数组中转换CSV，因为在SO代码段中加载CSV很复杂）：

var数据集text=[{
傅:32,，
酒吧：43，
巴兹：31
}, {
傅:12,，
酒吧：88，
巴兹：11
}, {
傅:33,，
酒吧：88，
巴兹：21
}, {
傅:17,，
酒吧：33，
巴兹：42
}];
变量主体=d3。选择（“主体”）；
var headers=Object.keys（datasetext[0]）；
var table=body.append（'table'）
var thead=table.append（'thead'）
var tbody=table.append（'tbody'）；
var head=thead.selectAll（'th'）
.数据（标题）
.输入（）
.append（'th'）
.文本（功能（d）{
返回d；
});
var rows=tbody.selectAll（'tr'）
.数据（数据集文本）
.输入（）
.append（'tr'）；
变量单元格=行。选择全部（'td'）
.数据（功能（d）{
返回Object.value（d）；
})
.输入（）
.append（'td'））
.文本（功能（d）{
返回d；
});
。表格填充{
背景：白色；
边界半径：3px；
边界塌陷：塌陷；
高度：320px；
保证金：自动；
最大宽度：600px；
填充物：5px；
宽度：100%；
盒影：0 5px 10px rgba（0,0,0,0.1）；
动画：无限浮动；
}
th{
颜色：#D5DDE5；；
背景：#1b1e24；
边框底部：4px实心#9ea7af；
右边框：1px实心#343a45；
字体大小：23px；
字号：100；
填充：10px；
文本对齐：左对齐；
文本阴影：0 1px 1px rgba（0,0,0,0.1）；
垂直对齐：中间对齐；
}
第一个孩子{
边框左上半径：3px；
}
最后一个孩子{
边框右上角半径：3px；
边界权：无；
}
tr{
边框顶部：1px实心#C1C3D1；
边框底部-：1px实心#C1C3D1；
颜色：#666B85；
字体大小：16px；
字体大小：正常；
文本阴影：0 1px 1px rgba（256、256、256、0.1）；
}
tr：悬停td{
背景#4E5066；
颜色：#FFFFFF；
边框顶部：1px实心#22262e；
边框底部：1px实心#22262e；
}
tr：第一个孩子{
边界顶部：无；
}
tr：最后一个孩子{
边框底部：无；
}
tr:N个孩子（奇数）td{
背景：#EBEBEB；
}
tr:n子对象（奇数）：悬停td{
背景#4E5066；
}
tr：最后一个孩子td：第一个孩子{
边框左下半径：3px；
}
tr:最后一个孩子td:最后一个孩子{
边框右下半径：3px；
}
运输署{
背景：#FFFFFF；
填充：10px；
文本对齐：左对齐；
垂直对齐：中间对齐；
字体大小：300；
字号：18px；
文本阴影：-1px-1px 1px rgba（0,0,0,0.1）；
右边框：1px实心#C1C3D1；
}
td：最后一个孩子{
右边框：0px；
}
文本左{
文本对齐：左对齐；
}
文本中心{
文本对齐：居中；
}
右文本{
文本对齐：右对齐；
}
td.text-left{
文本对齐：左对齐；
}
文本中心{
文本对齐：居中；
}
td.text-right{
文本对齐：右对齐；
}
这里有一些问题，比如：

而且，它似乎没有检测到我的th：它显示它们和普通的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 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（）
创建单元格：

请注意，
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作为外部链接，下面是使用SO代码段的相同代码（我必须在相应的对象数组中转换CSV，因为在SO代码段中加载CSV很复杂）：


var数据集text=[{
傅:32,，
酒吧：43，
巴兹：31
}, {
傅:12,，
酒吧：88，
巴兹：11
}, {
傅:33,，
酒吧：88，
巴兹：21
}, {
傅:17,，
酒吧：33，
巴兹：42
}];
变量主体=d3。选择（“主体”）；
var headers=Object.keys（datasetext[0]）；
var table=body.append（'tabl