同时提取维度列表并在扩展过程中为每个维度创建比例?

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]);

对于除name之外的每一列(即数组中的每个值dimensions，它正在创建一个刻度(因为false && anything被短路计算为false，并且anything部分被忽略，name列将没有y刻度)。

因此，如果cylindersd一个特定迭代中的，它将在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

后记：像我这样的凡人会以更谦卑的方式编写代码：

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