目前正在学习D3,我对表格有点困惑。我能够在互联网上找到这个代码,创建一个简单的HTML表格:
function tabulate(data, columns) {
var table = d3.select("#container").append("table"),
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
var 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")
.text(function(d) { return d.value; });
return table;
}
我将此作为我的JSON文件:
[
{"name": "John", "age": 11},
{"name": "Jane", "age": 20},
{"name": "Robert", "age": 35},
{"name": "Meg", "age": 56},
{"name": "Ryan", "age": 80},
{"name": "Emma", "age": 11},
{"name": "Dale", "age": 20},
{"name": "Sam", "age": 35},
{"name": "Belle", "age": 56},
{"name": "Snow", "age": 80}
]
它将创建一个简单的双列表。现在我的问题是,如何选择单个行?如果我使用selectAll(" tbody tr"),它当然会选择所有行。但如果我使用select(" tbody tr"),它只会选择第一个。
请记住,我是一个完整的新手。我主要通过阅读和反复试验来学习。