javascript - 如何根据 C3.js/D3.js 图表中的阈值更改线条颜色？

Question

我有一个实际值数组，它应该只是一行和一个阈值数组，它应该是第二行。当实际值线穿过阈值线时，这部分线的颜色应该改变。

var chart = c3.generate({
    point: {
        r: 5
    },
    data: {
        x: 'x',
        columns: [
            ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04'],
            ['actual value', 230, 120, 300, 50],
            ['threshold', 130, 280, 100, 250],
        ],
        type: 'spline',
        regions: {
            'threshold': [{'style': 'dashed'}]
        },
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%Y-%m-%d'
            }
        }
    }
});

Answer 1

我不确定它是如何在 c3 中完成的，但正如您在问题中提到的 d3 ，您将使用 threshold scale在d3中。

参见this example from blocks :

var colorThresholdScale = d3.scaleThreshold()
  .domain([0.11, 0.22, 0.33, 0.50])
  .range(["#fee5d9", "#fcae91", "#fb6a4a", "#de2d26", "#a50f15"]);

阈值范围内的值始终比域多一个值。

如果给定值小于域中的第一个值，则输出范围中的第一个值:

colorThresholdScale(0.02); // "#fee5d9"

如果输入值大于域中的第 n 个值，且小于域中的第 n + 1 个值，则 n +输出范围内的第 1 个值:

colorThresholdScale(0.25); // "#fb6a4a"

如果输入值大于域中的最后一个值，则输出范围中的最后一个值:

colorThresholdScale(0.6); // "#a50f15"