javascript - d3.js 重新排列绘图的数据列

Question

我已经尝试了一段时间，但我不确定我需要搜索什么关键字。无论如何，我有兴趣更改 d3 中数据的加载方式，以便我可以重新排列图中的列。在 R 术语中，我正在寻找的内容相当于改变因子水平以便能够重新排列条形图中的列。

例如，在下面一个块的链接中，我想手动设置平行坐标的顺序。目前，它显示经济，气缸，从左到右年份。我想做一些类似年份、重量、位移等的事情。

https://bl.ocks.org/jasondavies/1341281

Answer 1

列的顺序由d3.keys(cars[0])以下代码段确定：

x.domain(dimensions = d3.keys(cars[0]).filter(function(d) {
    return d != "name" && (y[d] = d3.scale.linear()
        .domain(d3.extent(cars, function(p) {
            return +p[d];
        }))
        .range([height, 0]));
}));

例如，这里是相同的代码，但使用...

d3.keys(cars[0]).sort()

...按字母顺序对数组进行排序：https ://bl.ocks.org/anonymous/9fb7329fed0e2ea539bab5bc5a47a16c

所以，如果你想要一个特定的顺序，你可以简单地传递所需的数组：

x.domain(dimensions = ["year", , "weight (lb)", "name", "displacement (cc)", "economy (mpg)", "cylinders", "power (hp)", "0-60 mph (s)"].filter(function(d) {
    return d != "name" && (y[d] = d3.scale.linear()
        .domain(d3.extent(cars, function(p) {
            return +p[d];
        }))
        .range([height, 0]));
}));

这里是块：https ://bl.ocks.org/anonymous/4f1798a5e658df7986f70effa030497c

Answer 2

为此，您可以获取 csv 文件（即 cars.csv）并在 excel 电子表格中进行编辑。在那里，您可以根据需要转置列并复制回您的 d3js 函数。看下面的例子（用excel完成）：

name,year,weight (lb),displacement (cc),economy (mpg),cylinders,power (hp),0-60 mph (s)

AMC 大使 Brougham,73,3821,360,13,8,175,11 AMC 大使 DPL,70,3850,390,15,8,190,8.5 AMC 大使 SST,72,3672,304,17,8,150,11.5 AMC Concord DL 6, 79,3265,232,20.2,6,90,18.2

等等...我不想让它扩展太多...