javascript - 在比较中将常量更改为变量会产生意外结果

Question

我已经愚弄这个问题有一段时间了，但我无法理解它。

这为我提供了我正在寻找的输出(彩色条取决于值)

我有以下代码:

t2actual: 
function(d) {
    if (d.value >= 44.5 && d.value <= 45.5) {
        return '#218340';
    } else if (d.value >= 44.0 && d.value <= 44.4 || d.value >= 45.6 && d.value <= 50) {
        return '#f7b731';
    } else {
        return '#a62337';
    }
}

参见带断点的迭代#1(为什么 d.value 未定义，但它有效？):

这没有给我想要的输出(彩色条取决于值)

当我将其更改为这个时，每次迭代我都会得到 else:

t2actual: 
function(d) {
    arrayIndex++
    var setPoint = columns_TurbineConditions[0][arrayIndex];

    if ((setPoint - 0.5) <= d.value && d.value <= (setPoint + 0.5)) {
        return '#218340';
    } else if ((setPoint - 1) <= d.value && d.value <= (setPoint + 1)) {
        return '#f7b731';
    } else {
        return '#a62337';
    }
}

参见带断点的迭代#1(为什么 d.value 仍然未定义，但它不起作用？):

访问JS fiddle整个代码。

编辑:我按照评论中的建议考虑了运算符优先级，以下内容对我不起作用:

if (((setPoint - 0.5) <= d.value) && (d.value <= (setPoint + 0.5))) {

Answer 1

需要进行一些研究，但在示例中:https://c3js.org/samples/data_color.html

基本上，您需要在图表的 data 属性上设置 color 方法。我还清理了一些格式并重构了为 t2actual 生成颜色的方式。从 t2setpoint 获取值所需的索引位于数据对象 d 中。但是，您需要向其添加 1，以便跳过位于数组开头的标识符。

var columns_TurbineConditions = [
        ['t2setpoint', 45.1, 45, 45.4, 45, 45.2, 45, 45, 45, 45, 48.1, 45, 45],
        ['drybulb', 82.3, 82.3, 82.3, 82.3, 82.3, 82.3, 82.3, 82.3, 82.3, 82.3, 82.3, 82.3],
        ['t2actual', 46, 45, 45, 46, 47, 46, 45, 45, 45, 44, 45, 46]
    ];
        
var chart = c3.generate({
    bindto: '#charts_TurbineConditions',
    data: {
        columns: columns_TurbineConditions,
        axes: {
            t2setpoint: 'y',
            drybulb: 'y',
            t2actual: 'y2'
        },
        types: {
            't2setpoint': "spline",
            'drybulb': "spline",
            't2actual': "bar"
        },
        groups: [
            ['t2actual']
        ],
        colors: {
            t2setpoint: '#77777a',
            drybulb: '#4d4d4f',
            t2actual: '#ffffff' // set the legend color here
        },
        color: function(color, d) { 
            // d will be 'id' when called for legends
            if(typeof d !== 'object') {
                return color;
            }
            
            var setPoint = columns_TurbineConditions[0][d.index + 1];

            if (setPoint - 0.5 <= d.value && d.value <= setPoint + 0.5) {
                return '#218340';
            } 

            if (setPoint - 1 <= d.value && d.value <= setPoint + 1) {
                return '#f7b731';
            } 

            return '#a62337';     
        },
        names: {
            't2setpoint': 'T2 Setpoint (°F)',
            'drybulb': 'Dry Bulb (°F)',
            't2actual': 'T2 Actual (°F)'
        }
    },
    axis: {
        x: {
            type: 'category',
            label: {
                text: '',
                position: 'outer-center'
            },
            tick: {
                rotate: -75,
                multiline: false
            },
            height: 70,
            categories: ['Turbine 1', 'Turbine 2', 'Turbine 3', 'Turbine 4', 'Turbine 5', 'Turbine 6', 'Turbine 7', 'Turbine 8', 'Turbine 9', 'Turbine 10', 'Turbine 11', 'Turbine 12']
        },
        y: {
            min: 30,
            max: 100,
            label: {
                text: 'Dry Bulb',
                position: 'outer-middle'
            }
        },
        y2: {
            min: 30,
            max: 100,
            show: true,
            label: {
                text: 'T2 Actual',
                position: 'outer-middle'
            }
        }
    },
    bar: {
        width: 50
    },
    legend: {
        show: true,
    },
    padding: {
        bottom: 0,
        top: 0,
    },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">

<div id="charts_TurbineConditions"></div>