我如何使用D3.nest?

时间:2016-05-18 16:42:51

标签: javascript arrays json d3.js

我试图使用D3.nest失败了。我只想构建一个像http://jsfiddle.net/7WQjr/这样的简单表。我跟随这个例子一切正常,但是当我添加这段代码时

var people = d3.nest() 
            .key(function(d) { return d.authorname;}) 
            .rollup(function(d) {
                    return d3.sum(d, function(g) {return g.linkclicks;}); 
        }).entries(people);
         console.log(people);

我的数据不再显示在表格中。我只有专栏的标题。然而,看一下控制台,我的数据分组很好。这是我的整个代码:

        <script>
       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 url = 'http://localhost:5000/authors';

function doData(error, people){
         if (error) throw error;

    var people = d3.nest() 
        .key(function(d) { return d.authorname;}) 
        .rollup(function(d) {
                return d3.sum(d, function(g) {return g.linkclicks;}); 
    }).entries(people);
     console.log(people);



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

    // 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.linkclicks, b.linkclicks);
        });  
 };  

d3.json(url, doData); 
console.log("Hello World!");

</script>

由于

0 个答案:

没有答案