2

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

1 に答える 1

4

この質問に似ています: cubism.js のカラー バンド

Cubism は、このextentオプションを使用して、スケールの範囲ではなく、水平線グラフの最小値と最大値を設定します。範囲を明示的に設定しないと、データの最小値と最大値のみが使用されるため、必要なカラー バンドが得られない場合があります。horizon.extent([0, 100])代わりに、スケール範囲の代わりに必ず追加してください。

また、すべてのデータが正であることを意図しているようです。ホライズン チャートでは、色の前半が負の値に、後半が正の値に割り当てられることに注意してください。正の値しかない場合、カラー配列の前半は無視されます。

于 2013-01-07T17:19:19.413 に答える