Sorting 带有CSV数据的D3 sort（）

我正在尝试各种方法使

.sort（）

在我的csv数据集上工作。不走运

我只想按“值”列对数据进行排序

这是我在

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.升序（a.value，b.value））

时，我得到了正确的输出：

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

---

但是条形图数据没有排序。

从提供的代码中看不清楚，但我猜您没有处理d3.csv的异步特性

。注意声明、填充和使用

数据
对象的位置

这里是一个部分列表。我添加了重新排序
数据的按钮。为了实现这一点，我们需要将排序逻辑放在
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>


var数据=[]；
d3.csv（“data.csv”，
函数（错误，行）{
rows.forEach（函数（r）{
数据推送({
费用：+r.费用，
类别：r.类别
})
});
render（）；
});
函数渲染（D3比较器）{
if（d3Comparator）data=data.sort（函数（a，b）{
返回d3[d3Comparator]（a.费用，b.费用）；
});
d3.select（“body”）.selectAll（“div.h-bar”）/从提供的代码中不清楚，但我猜您没有处理d3.csv的异步性质

。注意声明、填充和使用
数据
对象的位置

这是一个部分列表。我添加了一些按钮，可以重新排序
数据
。为了实现这一点，我们需要将排序逻辑放在
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>


var数据=[]；
d3.csv（“data.csv”，
函数（错误，行）{
rows.forEach（函数（r）{
数据推送({
费用：+r.费用，
类别：r.类别
})
});
render（）；
});
函数渲染（D3比较器）{
if（d3Comparator）data=data.sort（函数（a，b）{
返回d3[d3Comparator]（a.费用，b.费用）；
});
d3.选择（“主体”）.selectAll（“div.h-bar”）//何时渲染图形？提供plunkr或小提琴。何时渲染图形？提供plunkr或小提琴。非常感谢。我注意到您使用了双csv（），function（），function（）。最初，我也使用了它。为什么只使用一个函数并从数据集中推断d.xyz值更可取？没有真正的优势。它只是为了方便。做同样的事情总是有很多方法。我想你通常会想要一个单独的
渲染
函数，可以访问
数据
，因为e您经常需要动态地重新排序或重新计算
数据
。我将csv（）函数保留在父作用域函数中，然后在该函数中保留drawchart（）和updatechart（）。但是，是的。非常感谢。我注意到您使用了双csv（），function（），function（）。最初，我也使用了它。为什么只使用一个函数并从数据集中推断d.xyz值更可取？没有真正的优势。它只是为了方便。做同样的事情总是有很多方法。我想你通常会想要一个单独的
渲染
函数，可以访问
数据
，因为e您通常需要动态重新排序或重新计算
数据
。我将csv（）函数保留在父作用域函数中，然后将drawchart（）和updatechart（）保留在该函数中。但是，是的。。