javascript - 在 D3.js 中对大型 CSV 进行排序

Question

我正在尝试使用 D3.js 对中等大小的 CSV 文件(约 3000 行)进行排序，然后将其传递给可视化算法。

显然，虽然我的代码有问题，因为排序似乎应用于“ block ” - 请参见上图。我正在使用这个 d3 函数:

            dataset.sort(function(a,b) {
              return d3.descending(a.counttotal, b.counttotal);
          });

代码如下:

    // Your D3 code will go here
    // safe way to load data 

    var dataset = [];
    d3.csv("subjects.csv",
            function(error, rows) {
                rows.forEach(function(r) {
                    dataset.push({
                        label: r.label,
                        counttotal: r.counttotal
                    })
                });
                generateVis();
            });


    function generateVis(){


        var h = dataset.length * 100; //7000;
        var w = 1000;


        dataset.sort(function(a,b) {
              return d3.descending(a.counttotal, b.counttotal);
          });


        var svg = d3.select("#svg-rect").append("svg")
            .attr('id','mySVG')
            .attr("width", w )
            .attr("height", h);

        var rects = svg.selectAll("rect")
                   .data(dataset)
                   .enter()
                   .append("rect");           

        rects.attr("x", 0)
            .attr("y", function(d, i){
                return i * 10 + 10;
            })
            .attr("width", function(d){
                return d.counttotal;
            })
            .attr("height", 8)
            .append("title")
            .text(function (d){
                return d.label + " has " + d.counttotal + " articles ";
            })


    };

可以在此处找到 CSV 文件:https://www.dropbox.com/s/3kwzwqbgts8z2lh/subjects.csv?dl=0

非常感谢任何帮助!

Answer 1

排序功能按字母顺序排序。首先将总数转换为数字...

dataset.sort(function(a,b) {
          return d3.descending(+a.counttotal, +b.counttotal);
      });