我在 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”对象将是动态的,并且颜色将根据数量而变化的访客。如何从“访客”对象返回颜色?
您可以迭代访问者数组并根据多边形
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;
}
}
});