Cubism.js - 范围到颜色映射答案

【问题标题】：Cubism.js - range to color mappingCubism.js - 范围到颜色映射
【发布时间】：2012-10-12 19:07:17
【问题描述】：

我正在使用 cubism.js 生成 CPU 利用率时间序列。我有系列显示，但是我注意到颜色是如何分配给值的一些奇怪的东西。

例如，值 10 的颜色与值 100（红色）相同。我在下面定义了 50 种颜色。我希望每 5 个值（大于 0）将分配给相应的颜色。

我希望值 10 得到颜色 #00DDDD，值 100 得到颜色 #FF0000。

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

这是我正在谈论的代码部分的 sn-p。

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("+,")));

【问题讨论】：

标签： d3.js cubism.js

【解决方案1】：

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

Cubism 使用extent 选项来设置水平线图的最小值和最大值，而不是刻度范围。如果您没有明确设置范围，它只会使用数据中的最小值和最大值，这可能不会为您提供所需的色带。相反，请确保添加 horizon.extent([0, 100]) 而不是比例范围。

此外，您似乎打算将所有数据都设为正数。请记住，水平线图将颜色的前半部分分配给负值，将后半部分分配给正值。如果您只有正值，则颜色数组的前半部分将被忽略。

【讨论】：