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

Question

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

比如在link下面的一个block中，我想手动设置平行坐标的顺序。目前，它从左到右显示经济、圆柱体到年份。我想做一些年，重量，排量等

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

Answer 1

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

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

AMC 布鲁厄姆大使,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

等等...我不想让它延长太多...

Answer 2

列的顺序由以下代码段中的 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

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

d3.js Rearranging columns of data for plot

javascript

d3.js

parallel-coordinates