Question

使用以下内容创建了一个javascript数据对象（JSON表示法）：

"[
   {"range":"Shape","values":[{"idx":0,"val":"Random"},{"idx":1,"val":"Line"},{"idx":2,"val":"Square"},{"idx":3,"val":"Circle"},{"idx":4,"val":"Oval"},{"idx":5,"val":"Egg"}]},
   {"range":"Color","values":[{"idx":0,"val":"Red"},{"idx":1,"val":"Blue"},{"idx":2,"val":"Yellow"},{"idx":3,"val":"Green"},{"idx":4,"val":"Cyan"}]}
]"

在下一步中，必须在此对象中找到序数值的索引。该函数应在'Color'范围内找到值'Blue'的索引。

因此该函数应该具有元脚本形式

f("Color")("Blue")=1

在D3和javascript的上下文中创建这样一个函数最优雅的形式是什么？

Answer 1

根据您的使用情况，将数据结构转换为更适合直接访问的不同结构可能是有意义的。例如。你可以将你的结构转换为

var data = {
    Shape: ['Random', 'Line', ...], 
    // ...
};

并使用

访问它

data['Shape'].indexOf('Line') // or data.Shape.indexOf('Line')

或者甚至更进一步转换为

var data = {
    Shape: {
      Random: 0,
      Line: 1, 
      // ...
    },
    // ...
};

并使用

访问它

data['Shape']['Line'] // or data.Shape.Line

最佳解决方案取决于实际用例。

动态转换结构非常简单。以下是将其转换为第一个建议的示例：

var newData = {};
data.forEach(function(item) {
    newData[item.range] = 
        item.values.map(function(value) { return value.val; });
});

这也会减少冗余（例如idx似乎与元素索引相对应）。

Answer 2

这对你有用吗？

var dataJson = '[ \
   {"range":"Shape","values":[{"idx":0,"val":"Random"},{"idx":1,"val":"Line"},{"idx":2,"val":"Square"},{"idx":3,"val":"Circle"},{"idx":4,"val":"Oval"},{"idx":5,"val":"Egg"}]},\
   {"range":"Color","values":[{"idx":0,"val":"Red"},{"idx":1,"val":"Blue"},{"idx":2,"val":"Yellow"},{"idx":3,"val":"Green"},{"idx":4,"val":"Cyan"}]}\
]';

var data = JSON.parse(dataJson);

for (each in data){
   if ( (data[each].range) === 'Color'){
      for (eachVal in data[each].values){
         if (data[each].values[eachVal].val === 'Blue'){
            alert(data[each].values[eachVal].idx);
         }
      }
   } ;
}

here is the JSFiddle也适合你。

访问D3.js中的javascript对象

2 个答案: