Question

我有一个对象形式的数据，我试图只将对象的某些属性绑定到我选择的数据。

对象看起来像这样：

var data = {'attr1': 100,
            'attr2': "foo",
            'attr3': 200,
            ...
            'attr20': 34}

我有一个我感兴趣的属性名称存储在一个数组中：

keys = ['attr1', 'attr3', 'attr20']

我想绑定值（100,200,34）。我正在做以下事情：

var selection = d3.select('ul')
                  .selectAll('li')
                  .data(keys, function(key){ return data[key]})
                  .enter()
                  .append('li')
                  .text(function(d){return d})

而不是将“100”“200”和“34”作为文本输出，我得到“attr1”，“attr2”和“attr3”。我希望key函数返回data的值，但它只返回键。

当我知道这些密钥时，有关如何仅绑定data对象的某些属性的任何建议吗？

我知道我的使用有点“向后”......我在这里做了一个jsfiddle以显示输出：http://jsfiddle.net/ChwLM/1/

Answer 1

在设置数据之前，您需要过滤更改数据 - http://jsfiddle.net/ChwLM/3/。

在d3中，当您将函数作为第二个参数传递时，以下是它的调用方式：

for (i = -1; ++i < m;) {
  keyValue = key.call(groupData, nodeData = groupData[i], i);
  if (node = nodeByKeyValue.get(keyValue)) {
    updateNodes[i] = node;
    node.__data__ = nodeData;
  } else if (!dataByKeyValue.has(keyValue)) { // no duplicate data key
    enterNodes[i] = d3_selection_dataNode(nodeData);
  }
  dataByKeyValue.set(keyValue, nodeData);
  nodeByKeyValue.remove(keyValue);
}

groupData是['attr1', 'attr3', 'attr20']。您使用功能更改的是数据的关键，而不是值。使用此选项 - nodeData = groupData[i] - 在您更改之前，该值已设置。这是上面小提琴的相关部分：

keys = ['attr1', 'attr3', 'attr20'];
filtered = [];
for (var i = 0, l = keys.length; i < l; ++i) {
    filtered.push(data[keys[i]]);
}

然后您可以将filtered传递给.data。

将对象的某些属性绑定到数据

1 个答案: