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

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

基本上，您需要在图表的color属性上设置data方法。我还清理了一些格式，并重构了为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>