Cubism.js -范围到颜色的映射

Question

我使用cubism.js生成CPU利用率时间序列。我已经显示了这个序列，但是我注意到一些关于如何将颜色赋给值的奇怪的事情。

例如，值10将获得与值100 (红色)相同的颜色。我在下面定义了50种颜色。我期望每5个值(大于0)将被分配给相应的颜色。

我认为值10会得到颜色#00DDDD，值100会得到颜色#FF0000。

从比例范围到颜色的映射定义在哪里？

下面是我所说的那段代码的片段。

var colors = ["#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff",
"#00BBBB", "#00CCCC", "#00DDDD", "#00EEEE", "#00FFFF", "#00BB5E", "#00CC66", "#00DD6F", "#00EE77", "#00FF84", "#BBBB00", "#CCCC00", "#DDDD00", "#EEEE00", "#FFFF00J", "#BB5E00", "#CC6600m", "#DD6F00", "#EE7700", "#FF8000", "#BB0000", "#CC0000", "#DD0000", "#EE0000", "#FF0000"];

// Iterate through each search criteria, passing the host, criteria tuple.
// Queries and returns app server metrics, finally graphing accordingly.

var scale = d3.scale.linear().range([0,100]);
d3.select("body").selectAll(".horizon")
    .data(search_criterias.map(app_server_data_collector))
    .enter().insert("div", ".bottom")
    .attr("class", "horizon")
    .call(context.horizon().scale(scale).colors(colors).format(d3.format("+,")));

Answer 1

类似于这个问题：Color bands for cubism.js

立体主义使用extent选项来设置地平线图表的最小值和最大值，而不是比例范围。如果不显式设置范围，它将只使用数据中的最小值和最大值，这可能不会为您提供所需的色带。相反，请确保添加的是horizon.extent([0, 100])而不是比例范围。

而且，看起来你打算让你的所有数据都是积极的。请记住，地平线图表将前半部分的颜色指定为负值，将后半部分颜色指定为正值。如果只有正值，则颜色数组的前半部分将被忽略。