为什么使用键过滤器而不是 columns.slice()？答案

【问题标题】：Why use keys filter instead of columns.slice()?为什么使用键过滤器而不是 columns.slice()？
【发布时间】：2017-03-24 06:19:18
【问题描述】：

作者为什么要使用

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

而不是使用

cars.columns.slice(1)

..？切片有效地返回相同的信息，而无需执行以下任何逻辑。

  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

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

该代码的作者是 D3 的创建者。当然，他可能更喜欢第二个sn-p。但是，该代码使用的是 D3 v3.x，并且该版本 D3 的数据数组中没有 columns 属性。

让我们在下面的 sn-ps 中看到这一点。

首先，使用 D3 v3.x：

var data = d3.csv.parse(d3.select("#csv").text());

console.log("using d3.keys: " + d3.keys(data[0]));
console.log("using data.columns: " + data.columns);

pre{
  display: none;
}

<script src="https://d3js.org/d3.v3.min.js"></script>
<pre id="csv">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</pre>

您可以看到d3.keys(data[0]) 有效，而data.columns 返回未定义。

现在使用 D3 v4.x：

var data = d3.csvParse(d3.select("#csv").text());

console.log("using d3.keys: " + d3.keys(data[0]));
console.log("using data.columns: " + data.columns);

pre{
  display: none;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<pre id="csv">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</pre>

d3.keys(data[0]) 和 data.columns 都有效，并且给您相同的结果。

【讨论】：