JavaScript 按字母顺序创建索引映射

Question

我有一个 csv 正在加载到我用 D3 渲染的和弦图中:

origin    destination    value
banana    kiwi           10
apple     banana         5
pear      kiwi           12

此数据以这种格式传递:

console.log(data)
>> 0: {origin: "banana", destination: "kiwi", value: 10}
   1: {origin: "apple", destination: "banana", value: 5}
   2: {origin: "pear", destination: "kiwi", value: 12}

我正在创建一个包含 origin 和 destination 的矩阵，其中 value 填充矩阵值。第一步是创建一个将水果名称与索引相关联的映射:

var nameToIndex = {},
      names = [],
      matrix = [],
      n = 0,

  function recordName(name){
    if( !(name in nameToIndex) ){
            nameToIndex[name] = n++;
            names.push(name);
          }
        }

  data.forEach(function (d){
    recordName(d.origin);
    recordName(d.destination);
  });

运行后，这里是示例 console.log() 命令:

console.log(nameToIndex[apple])
>> 2

console.log(nameToIndex[kiwi])
>> 1

名称不是按字母顺序组织的。我将如何对名称进行排序以便它们的索引也被排序？前面命令的结果应该是:

console.log(nameToIndex[apple])
>> 0

console.log(nameToIndex[kiwi])
>> 2

苹果是第一个水果，猕猴桃是第三个水果。

我尝试将 names.sort() 添加到 recordName() 函数中，但这只是对 names 进行了排序(可预测)，并且没有不要更改 nameToIndex 的索引。

如何对 nameToIndex 进行排序，以便对键和值进行排序？

Answer 1

根据 your comment ，您想要的只是一个以所有水果作为键并将它们的字母顺序位置作为值的对象。

那么，我们首先得到所有的水果...

var allFruits = [...new Set(data.map(function(d) {
    return d.origin
}).concat(data.map(function(d) {
    return d.destination
})))]

...并对结果数组进行排序:

.sort(function(a, b) {
    return d3.ascending(a, b)
});

之后，我们只需使用 forEach 填充 nameToIndex:

allFruits.forEach(function(d, i) {
    nameToIndex[d] = i;
});

这是演示:

var csv = `origin,destination,value
banana,kiwi,10
apple,banana,5
pear,kiwi,12`;

var data = d3.csvParse(csv);

var nameToIndex = {};

var allFruits = [...new Set(data.map(function(d) {
  return d.origin
}).concat(data.map(function(d) {
  return d.destination
})))].sort(function(a, b) {
  return d3.ascending(a, b)
});

allFruits.forEach(function(d, i) {
  nameToIndex[d] = i;
});

console.log(nameToIndex)

<script src="https://d3js.org/d3.v4.min.js"></script>