合并共享公共键或值的对象

时间:2015-01-23 23:35:21

标签: javascript d3.js underscore.js

我正在加载一个大的CSV来处理javascript - 从中​​创建SVG元素。 变量中有一个名为code的属性。在CSV中,有一个名为SPECIES的列。 “Code”和“SPECIES”包含相同的字母代码。 我希望能够将CSV中的数据与var树进行比较,如果对于CSV中的特定记录,“SPECIES”字段与变量中的“code”值相同,我想要从变量返回“common”值。 CSV文件有150,000条记录,这就是为什么我不想添加另一个具有通用名称的列。

以下是变量的一部分(共有54个对象):

var trees = [
        { code: 'ACPL', 
          common: 'Norway Maple', 
          genus: 'Acer', 
          species: 'platanoides', 
          family: 'Sapindaceae', 
          color: '#00567e'
        },
        { code: 'ACRU', 
          common: 'Red Maple', 
          genus: 'Acer', 
          species: 'rubrum', 
          family: 'Sapindaceae', 
          color: '#0084ff'
        },
        { code: 'ACSA1', 
          common: 'Silver Maple', 
          genus: 'Acer', 
          species: 'saccharinum', 
          family: 'Sapindaceae', 
          color: '#c3c3c3'
        }
];

以下是data.csv的一部分(此处共有150,000条记录):

DIAMETER,SPECIES,longitude,latitude
15,ACPL,-73.935944,40.668076
22,ACPL,-73.934644,40.667189
28,ACSA1,-73.941676,40.667593
27,ACPL,-73.935095,40.666322
9,ACRU,-73.941297,40.667574
27,ACPL,-73.935149,40.666324
19,ACRU,-73.933664,40.666244

这是我尝试过的,但是没有效果:

var treeCode = trees.forEach(function(each) { return each.code; }); // returns the value of "code" for each object in the trees variable
var treeCommon = trees.forEach(function(each) { return each.common; }); // returns the value of "color" for each object in the trees variable

var tip = d3.tip() // d3.tip is a tooltip library for D3.js
        .attr('class', 'd3-tip')
        .offset([-10, 0])
        .html(function(d){if (d.SPECIES == treeCode){  // the data from the csv was loaded in earlier, and d.SPECIES returns the "SPECIES" field
            return treeCommon}
        })

对于需要做什么的任何想法都将不胜感激!如果我能澄清任何事情,请告诉我。 完整代码在此处:https://github.com/jhubley/street-trees/blob/master/index.html 您可以在该代码中看到有一个带有十六进制颜色的looong if / else语句。这是我想要使用这种方法的另一个例子。 谢谢你的期待!

1 个答案:

答案 0 :(得分:1)

http://underscorejs.org/有一些很棒的下划线文档。 D3是一个相当强大的库,所以我打赌其中一些功能已经内置到D3中。

因此,为了澄清,您希望运行CSV中的记录并从树对象中提取相应的数据。以下是我用下划线做这个的方法:

// Information about each tree type
var treeInfo = [
    { 
        code: 'ACPL', 
        common: 'Norway Maple', 
        genus: 'Acer', 
        species: 'platanoides', 
        family: 'Sapindaceae', 
        color: '#00567e'
    },
    ...
];

// imported from CSV
var treeList = [
    {
        DIAMETER: 15,
        SPECIES: "ACPL",
        longitude: -73.935944,
        latitude: 40.668076
    }
    ...
]

// loop through the imported list of trees
_.each(treeList, function(){
    // _.each() makes `this`` refer to the object in the list as it loops through
    // find the info for this tree species
    var info = _.findWhere(treeData, {"code": this.SPECIES});
    // insert the keys and values from the info object into the original object from the treeList
    _.extend(this, info);
})

//now treeList contains all the corresponding info (by species) from treeInfo for each tree