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

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>

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

Changing constant to variable in a comparison producing unexpected results

javascript

d3.js

c3.js