在d3.js中同時提取維度列表並為每個維度創建比例 - 展開過程？

Question

作為D3的初學者，我想逐步了解更多關於這個命令的內容。 請幫助我了解列表的形成方式以及如何使用該命令對各個比例進行規定。

這個命令可以分解成單獨的塊嗎？ - 例如一個用於列表創建，另一個用於yAxis定義

   var x = d3.scale.ordinal().rangePoints([0, width], 1),
   y = {};

  // Extract the list of dimensions and create a scale for each.
  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]));
  }));

這方面的數據是

name,economy (mpg),cylinders,displacement (cc),power (hp),weight (lb),0-60 mph (s),year
AMC Ambassador Brougham,13,8,360,175,3821,11,73
AMC Ambassador DPL,15,8,390,190,3850,8.5,70
AMC Ambassador SST,17,8,304,150,3672,11.5,72

資料來源： https ： //bl.ocks.org/mbostock/1341021

Answer 1

這是一種非常優雅的方法來創建一個名為y的對象，它具有幾個不同的線性比例，一個用於x軸中的每個分類變量（因為我們正在處理一個平行坐標圖）。

這是邏輯：

首先，Bostock（該代碼的作者）聲明了x軸的序數標度......

var x = d3.scale.ordinal().rangePoints([0, width], 1)

......和一個空物體：

var y = {}

到目前為止，沒什么不尋常

然后我們到了困惑你的街區。 讓我們分手吧。

它定義x比例的域，同時創建全局命名dimensions ：

x.domain(dimensions = d3.keys(cars[0]).filter(function(d) {
    return d != "name"
}));

dimensions實際上只是一個字符串數組......

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

...用d3.keys(cars[0]) ，過濾掉name列。

但是，在filter函數內部，它會填充y對象：

y[d] = d3.scale.linear()
    .domain(d3.extent(cars, function(p) {
        return +p[d];
    }))
    .range([height, 0]);

對於每一列（即dimensions數組中的每個值），除name外，它都會創建一個比例（因為false && anything被短路評估為false ，而anything部分都被忽略，因此沒有y比例name欄）。

因此，如果在一個特定迭代中的d是cylinders ，它將在y對象中創建此屬性：

y["cylinders"] = d3.scale.linear()
    .domain(d3.extent(cars, function(p) {
        return +p["cylinders"];
    }))
    .range([height, 0]))

最后，如果你使用console.log(y) ，你會看到一個包含所有音階的對象，就像這樣（我模仿Chrome控制台的荒謬嘗試）：

> Object
    > 0 - 60 mph(s): u(n)
    > cylinders: u(n)
    > displacement(cc): u(n)
    > economy(mpg): u(n)
    > power(hp): u(n)
    > weight(lb): u(n)
    > year: u(n)
    > __proto__: Object

Post Scriptum ：像我一樣的凡人，會以更謙卑的方式編寫代碼：

dimensions = d3.keys(cars[0]).filter(function(d) {
    return d != "name";
});

x.domain(dimensions);

dimensions.forEach(function(d) {
    y[d] = d3.scale.linear()
        .domain(d3.extent(cars, function(p) {
            return +p[d];
        }))
        .range([height, 0])
})

結果是一樣的。 這是顯示它的bl.ocks： https ：//bl.ocks.org/anonymous/87b926c85b8385aecdab722c74c4d2ef