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