为什么要使用键过滤器而不是column.slice()? [英] Why use keys filter instead of columns.slice()?

问题描述

作者为什么使用

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

代替

cars.columns.slice(1)

..?该分片有效地返回了相同的信息，而无需执行下面的任何逻辑.

..? The slice effectively returns the same information without having to do any logic below.

  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

推荐答案

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

The author of that code is the creator of D3. Of course, he would probably prefer the second snippet. However, that code is using D3 v3.x, and there is no columns property in the data array in that version of D3.

让我们在以下代码片段中看到这一点.

Let's see this in the following snippets.

首先，使用D3 v3.x:

First, using 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返回未定义.

You can see that d3.keys(data[0]) works, while data.columns returns undefined.

现在使用D3 v4.x:

Now using 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都可以工作，并获得相同的结果.

Both d3.keys(data[0]) and data.columns work, and give you the same result.

这篇关于为什么要使用键过滤器而不是column.slice()?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！