Question

我正在尝试各种方法让.sort()在我的csv数据集上运行。没有运气。

我只想按照＆＃34;值＆＃34;对数据进行排序。列。

这是我在d3.csv api通话中运行的功能，在我选择dom并追加我的div之前：

dataset = dataset.sort(function (a,b) {return d3.ascending(a.value, b.value); });

在我到达.sort之前，我清理数据：

dataset.forEach(function(d) {
            d.funded_month = parseDate(d.funded_month);
            d.value = +d.value;
        });
    };

一切似乎都井井有条。当我console.log(d3.ascending(a.value, b.value))时，我得到正确的输出：

-1 d32.html:138
1 d32.html:138
-1 d32.html:138
1 d32.html:138
etc..

然而，条形数据并没有排序。

Answer 1

从提供的代码中不清楚，但我会冒险猜测你没有处理d3.csv的异步性质。

This plunkr shows your sort code working fine。请注意声明，填充和使用data对象的位置。

这是部分列表。我添加了重新排序data的按钮。为实现这一目标，我们需要将排序逻辑放在render内，而不是放在d3.csv回调中。

<script type="text/javascript">
var data = [];
d3.csv("data.csv",
        function(error, rows) {
            rows.forEach(function(r) {
                data.push({
                    expense: +r.expense,
                    category: r.category
                })
            });
            render();
        });

function render(d3Comparator) {
    if(d3Comparator) data = data.sort(function(a, b) {
        return d3[d3Comparator](a.expense, b.expense);
    });
    d3.select("body").selectAll("div.h-bar") // <-B
            .data(data)
            .enter().append("div")
            .attr("class", "h-bar")
            .append("span");
    d3.select("body").selectAll("div.h-bar") // <-C
            .data(data)
            .exit().remove();
    d3.select("body").selectAll("div.h-bar") // <-D
            .style("width", function(d) {
                return (d.expense * 5) + "px";
            })
            .select("span")
            .text(function(d) {
                return d.category;
            });
}

</script>

<button onclick="render('ascending')">Sort ascending!</button>
<button onclick="render('descending')">Sort descending!</button>

D3 sort（）与CSV数据

1 个答案: