Question

我正在尝试在html表格中显示来自多列csv（那些没有标题）的数据。我已经在网上搜索答案，但我认为不存在。也许一个人做了，但我错过了，但请不要只是引用我在网上的一些帖子，因为我已经尝试了所有这些，我仍然被卡住了。我见过的每个例子都有标题或是一列。同样，我的csv文件没有HEADERS并且有多列。它看起来像这样。

2.051392,2.045899

2.04834,2.049256

2.051697,2.053833

因此，正如整个互联网所述，我将d3.csv.parserows函数传递给d3.text函数。然后我将列名分配给标题行。一切都很好，直到我将数据分配给td元素。代码生成具有列属性“ch1”和“ch2”的td元素，但td元素的value属性返回undefined。当我用行[0]或行[1]替换row [column]时，value属性返回一个值，所以我知道数据在那里。我错过了什么？

所以换句话说

value: row[column] //returns a value of undefined
value: row[0] //returns the first value in the row as expected
value: row[1] //returns the second value in the row as expected

我不明白为什么row [column]没有返回值

function tab_data(data,columns)
{
var table = d3.select("#tabulatedData").append("table").attr("border","1"),
thead = table.append("thead"),
tbody = table.append("tbody");

// append the header row
thead.append("tr")
.selectAll("th")
.data(columns)
.enter()
.append("th")
.text(function(column) { return column; });

// create a row for each object in the data
rows = tbody.selectAll("tr")
.data(data)
.enter()
.append("tr");

// Create a cell in each row for each column
var cells = rows.selectAll("td")
.data(function(row) {
return columns.map(function(column) {

return {
column: column,
value: row[column]
}; 

});
})
.enter()
.append("td")
.html(function(d) {

return d.value;

});




//main function

window.onload = function()

{
d3.text("data.csv", function(unparsedData)
{

data = d3.csv.parseRows(unparsedData);

tab_data(data,["ch1","ch2"]); 

});

}

我通过如下编辑代码来实现它，尽管必须有一个更优雅的解决方案。我认为d3的好处是for循环已成为过去。

// Create a cell in each row for each column
var cells = rows.selectAll("td")
    .data(function(row) {
        return columns.map(function(column) {

            for(var i = 0; i<columns.length; i++)
            {
                row[columns[i]] = row[i];
            }

            return {
                column: column,
                value: row[column]
            };  

        });
    })
    .enter()
    .append("td")
    .html(function(d) {

        return d.value;

    });

D3从csv文件创建具有多列和NO HEADERS的表

0 个答案: