0

我有对象形式的数据，我试图仅将对象的某些属性绑定到我的选择作为数据。

该对象看起来像这样：

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/

4

1 回答 1

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.

于 2013-09-21T21:21:03.557 回答