时间戳

首页 > 解决方案 > d3.keys() 语法说明？

javascript - d3.keys() 语法说明？

问题描述

嗨，学习 JavaScript 和 d3.js 的新手

以下语法从名为“data”的关联数组中保存的每个对象创建一个新的属性名称数组。

“数据”中第一个对象的属性名称被排除在外。

d3.keys(data[0])
  .filter(function(key) { return key !== "date";}))

我不明白为什么下面的代码没有给我相同的结果？

d3.keys(data)
  .filter(function(key) { return key !== "date";}))

为什么要告诉 d3 选择 [0] 索引位置以及过滤对象属性名称。d3.keys( object ) 方法不是遍历关联数组并返回一个新数组，其中包含定义的每个指定对象的属性名称吗？这让我觉得你只需要过滤？

标签： javascriptd3.js

解决方案

解释很简单：你不能将数组传递给d3.keys，它必须是一个对象。API对此很清楚：

返回一个包含指定对象的属性名称的数组。（强调我的）

如果您查看源代码，您会发现它d3.keys使用了一个for...in循环：

export default function(map) {
    var keys = [];
    for (var key in map) keys.push(key);
    return keys;
};

这不适用于数组。让我们来看看：

function d3keys(map) {
  var keys = [];
  for (var key in map) keys.push(key);
  return keys;
}

var myArray = [{
  x: "foo",
  y: "bar"
}, {
  x: "foobar",
  y: "barbaz"
}];

console.log(d3keys(myArray))

Object.keys()如果您使用，不使用 D3，也会发生同样的事情：

var myArray = [{
  x: "foo",
  y: "bar"
}, {
  x: "foobar",
  y: "barbaz"
}];

console.log(Object.keys(myArray))

解释是您不能（或不应该）for...in与数组一起使用。根据MDN：

注意： for...in 不应用于迭代索引顺序很重要的数组。

而最重要的部分：

数组索引只是具有整数名称的可枚举属性。（强调我的）

所以，我们必须传递一个对象。在这种情况下，myArray[0]例如：

function d3keys(map) {
  var keys = [];
  for (var key in map) keys.push(key);
  return keys;
}

var myArray = [{
  x: "foo",
  y: "bar"
}, {
  x: "foobar",
  y: "barbaz"
}];

console.log(d3keys(myArray[0]))

推荐阅读