Изменение константы на переменную в сравнении приводит к неожиданным результатам

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 не определено, но оно работает?):

Это не дает мне искомый вывод (цветные полосы в зависимости от значения)

Когда я меняю его к этому я обращаюсь к другому для каждой итерации:

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 скрипку для всего кода.

Редактировать: я рассматривал приоритет оператора как предложил в комментариях следующее не работает для меня:

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>