条件数量可变的 If/Else 块答案

【问题标题】：If/Else block with variable number of conditions条件数量可变的 If/Else 块
【发布时间】：2016-12-04 07:10:16
【问题描述】：

var dots = svg.selectAll(".dot")
                  .data(data)
                   .enter().append("circle")
                  .attr("class", "dot")
                  .attr("r", 5)
                  .attr("cx", xDots)
                  .attr("cy", yDots)
                  .style("fill", function(d) {

                    cd = d;

                    //
                  if(m.options.hicColors != null ) {
                    if(d.hic <= m.options.cutoffs[0]) {
                        d.fillColor = m.options.hicColors[0];
                        return m.options.hicColors[0];
                    } else if (d.hic > m.options.cutoffs[0] && d.hic <= m.options.cutoffs[1]) {
                        d.fillColor = m.options.hicColors[1];
                        return m.options.hicColors[1];
                    } else if(d.hic > m.options.cutoffs[1] && d.hic <= m.options.cutoffs[2]){
                        d.fillColor = m.options.hicColors[2];
                        return m.options.hicColors[2];
                    } else if(d.hic > m.options.cutoffs[2] && d.hic <= m.options.cutoffs[3]) {
                        d.fillColor = m.options.hicColors[3];
                        return m.options.hicColors[3];
                    } else  {
                        d.fillColor = m.options.hicColors[4];
                        return m.options.hicColors[4];
                    }
                  } 

})

我正在处理的程序涉及采用一组形状并根据两个数组对它们进行着色，一个包含要使用的颜色，另一个包含用于决定使用哪种颜色的截止值。以前，这些总是 5 种颜色和 4 个截止值，但现在我需要接受任意长度的数组。我不知道我怎么能做到这一点。有人对我如何完成这项任务有任何建议吗？

请注意，颜色数组的长度总是比截止数组大一。

【问题讨论】：

尝试循环，如果有问题，请告诉我们你做了什么。
你为什么不简单地使用秤？

标签： javascript arrays if-statement d3.js

【解决方案1】：

您可以通过一个 for 循环和一个 if 语句来完成此操作

if(m.options.hicColors != null ) {
    for (I = 0; I < m.options.hicColors.length; I ++) {
        if(d.hic <= m.options.cutoffs[i]) {
            d.fillColor = m.options.hicColors[i];
            return m.options.hicColors[i];
        }
    }
}

d.fillColor = m.options.hicColors[m.options.hicColor.length - 1];
return m.options.hicColors[m.options.hicColor.length - 1];

这应该按原样在旧代码的位置运行。希望对您有所帮助。

【讨论】：

trueYet 到底有什么意义？我的意思是，它可以工作，但trueYet 从来不是除了false 之外的任何东西，因为它唯一一次可以设置为true，无论如何你都会立即返回，所以if (trueYet == false) 部分是不必要的？只是想知道我是否遗漏了什么
@jonhopkins 不需要

【解决方案2】：

由于您知道您将始终检查 d.hic 是否在某个范围内，然后使用该范围的上限，因此检查可变长度数组的一种简单方法是从末尾向后工作，直到您找到该值所在的范围。

var len = m.options.cutoffs.length;
for (var i = len - 1; i > 0; i--) {
    if (d.hic > m.options.cutoffs[i - 1]) {
        d.fillColor = m.options.hicColors[i];
        return m.options.hicColors[i];
    }
}
// if we got here, then d.hic falls within lowest range
d.fillColor = m.options.hicColors[0];
return m.options.hicColors[0];

这样，您甚至不必检查上限，因为只有当d.hic 小于当前迭代的上限时，循环的前一次迭代才会失败。

请注意，这可以从数组的开头到结尾轻松完成。我个人只是使用向后的方法。

var len = m.options.cutoffs.length;
for (var i = 0; i < len; i++) {
    if (d.hic <= m.options.cutoffs[i]) {
        d.fillColor = m.options.hicColors[i];
        return m.options.hicColors[i];
    }
}
// still need to catch the case where d.hic is higher than the highest range
d.fillColor = m.options.hicColors[len - 1];
return m.options.hicColors[len - 1];

【讨论】：

【解决方案3】：

循环m.options.cutoffs 数组并执行类似传递循环实际索引的函数：

function analyse(hic, index){
    if(hic > m.options.cutoffs[index] && hic <= m.options.cutoffs[index+1]){
        return hic;
    }
}

【讨论】：