在D3.js

Question

一个JavaScript数据对象（JSON符号）访问javascript对象已经具有以下内容创建：

"[ 
    {"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"}]} 
]" 

在下一步骤的序值的索引在此被发现目的。该函数应该在“颜色”范围内找到值“蓝色”的索引。

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

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 

什么是最好的解决方案ution取决于实际使用情况。

---

动态转换结构非常简单。这里是将其转换到第一建议的一个示例：

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也适合你。