javascript - 访问 D3.js 中的 javascript 对象

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似乎与元素索引相对应)。