如何在D3表中选择单个行

时间:2014-11-04 07:55:20

标签: d3.js

目前正在学习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"),它只会选择第一个。

请记住,我是一个完整的新手。我主要通过阅读和反复试验来学习。

0 个答案:

没有答案