Cubism.js - 范围到颜色映射

我使用cubism.js来生成CPU利用率时间序列。我有这个系列显示，但是我注意到颜色如何赋值给一些奇怪的东西。Cubism.js - 范围到颜色映射

例如，值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("+,")));

来源

2012-10-12 toaler

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

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

此外，它看起来像你打算所有的数据是积极的。请记住，水平图将颜色的前半部分指定为负值，将后半部分指定为正值。如果只有正值，则颜色数组的前半部分将被忽略。

来源

2013-01-07 17:19:19 Aaron

Cubism.js - 范围到颜色映射

回答

相关问题