Question

家伙！再回到另一个D3问题！

我想在我的网站上添加两个表格，但问题是，它们会出现在彼此之下，而不是在各自的div中！我使用的代码如下（在JSFiddle。http://jsfiddle.net/7WQjr/中找到），我唯一改变的是＆＃34;＃container＆＃34; （在selectAll语句中使用div）。我更改为container2（另一个div）来创建另一个表。

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;
}

// create some people
var people = [
    {name: "Jill", age: 30},
    {name: "Bob", age: 32},
    {name: "George", age: 29},
    {name: "Sally", age: 31}
];

// render the table
var peopleTable = tabulate(people, ["name", "age"]);

// uppercase the column headers
peopleTable.selectAll("thead th")
    .text(function(column) {
        return column.charAt(0).toUpperCase() + column.substr(1);
    });

// sort by age
peopleTable.selectAll("tbody tr")
    .sort(function(a, b) {
        return d3.descending(a.age, b.age);
    });

我在这里缺少什么？

Answer 1

为什么不将容器ID作为参数传递？像这样：

function tabulate(container, data, columns) {
  var table = d3.select('#' + container).append("table")

所以你可以像这样调用这个函数：

var peopleOrderedTable = tabulate('container1' , people, ["name", "age"]);
var peopleTable = tabulate('container2' , people, ["name", "age"]);

D3表附加在彼此下方而不是div内部

1 个答案: