如何通过将一个对象的不同属性与另一个对象匹配来查找一个对象的属性

问题描述 投票:0回答:1

我在 d3 构造中有两个对象:

const visitors = [
              {
                 name: "polygon 1",
                 total: 342,
                 color: "red"
              },
              {
                 name: "polygon 2",
                 total: 342,
                 color: "blue"
              },
              {
                 name: "polygon 3",
                 total: 342,
                 color: "green"
              }
            ]

const polys = [{
                 name: "polygon 1",
                 points:[
                    {"x":-25, "y":48},
                    {"x":3,"y":48},
                    {"x":3,"y":40},
                    {"x":-25,"y":40},
                    {"x":-25,"y":48}
                  ]
               },
               {
                  name: "polygon 2",
                  points:[
                      {"x":5, "y":40},
                      {"x":23,"y":40},
                      {"x":23,"y":18},
                      {"x":5,"y":18},
                      {"x":5, "y":40}
                    ]
                },
                {
                    name: "polygon 3",
                    points:[
                      {"x":-25, "y":40},
                      {"x":5,"y":40},
                      {"x":5,"y":34},
                      {"x":-25,"y":34},
                      {"x":-25, "y":40}
                    ]
               }]

给定“polys”对象中的多边形名称,我需要从“visitors”对象中找到该多边形的颜色。

我已经尝试过:

d = one object of the 'polys' obj

.attr("fill", function(d, visitors) {
    for(var key in d){
        if (key === 'name' && d.name === visitors.name){
            return visitors.color;
        }
    }
});

如果颜色位于定义多边形的“polys”对象中,则返回颜色没有问题,但“polys”对象本质上是静态的,而“visitors”对象将是动态的,并且颜色将根据数量而变化的访客。如何从“访客”对象返回颜色?

javascript d3.js
1个回答
0
投票

您可以迭代访问者数组并根据多边形

name
值检查每个
name
值。如果有访客着色的匹配回报:

.attr("fill", function(d, visitors) {
    for(var x=0; x<visitors.length; x++){
        if(d.name == visitors[x].name){
            return visitors[x].color;
        }
    }
});
© www.soinside.com 2019 - 2024. All rights reserved.