时间戳

首页 > 解决方案 > 如何将属性与对象数组中的值进行比较？

javascript - 如何将属性与对象数组中的值进行比较？

问题描述

d： {"children":[{"name":"China","children":[{"name":"China","value":400,"percentage":"33.33"}],"index":0},{"name":"England","children":[{"name":"England","value":300,"percentage":"33.33"}],"index":1},{"name":"Malaysia","children":[{"name":"Malaysia","value":500,"percentage":"25.00"}],"index":2},{"name":"South Korea","children":[{"name":"South Korea","value":600,"percentage":"50.00"}],"index":3}]}

对象数组

cfg.thresholdSetting.thresholds = [{"dType":"threshold","from":0,"to":30,"color":"rgb(217, 20 ,39)"},{"dType":"threshold","from":30,"to":70,"color":"rgb(242, 145, 10)"},{"dType":"threshold","from":70,"to":120,"color":"rgb(33, 145, 49)"}]

然后我有一个属性：

rect.style("fill", function (d, i) {

    for (var k = 0; k < fromValues.length; k++) {
      console.log("percentage : " + d.percentage)
      console.log("from value : " + fromValues[k])
      console.log("to value : " + toValues[k])
         if (d.percentage >= fromValues[k] && d.percentage <= toValues[k]) {
           return cfg.thresholdSetting.thresholds[k].color;
         }
         else {
           return "#808080";
         } 
    }
  })

从代码中，我对 from 和 to 值的输出停滞不前。外循环根据我拥有的数据数量运行。我如何比较这些值？

电流输出

在此处输入图像描述

预期产出

d.percentage = 33.33
from value   = 0
to value     = 30

d.percentage = 33.33
from value   = 30
to value     = 70

d.percentage = 33.33
from value   = 70
to value     = 120 

d.percentage = 50.00
from value   = 0
to value     = 30

d.percentage = 50.00
from value   = 30
to value     = 70

d.percentage = 50.00
from value   = 70
to value     = 120

标签： javascriptarraysfor-loopd3.js

解决方案

根据您的示例，我假设您使用的是 d3，并且您想根据它们所在的 bin 设置矩形的颜色。"#808080"当数据与任何 bin 都不匹配时，我还假设它是默认颜色。在这种情况下：

rect.style("fill", function(d) {
    var color = cfg.thresholdSetting.thresholds.filter(function(t, i) {
        return d.percentage >= t.from && d.percentage < t.to;
    });
    return color.length > 0 ? color[0].color : "#808080";
});

推荐阅读