d3.jsとSVGを使用してプロジェクトに取り組み始めたところです。次の例を参照としてhttp://bl.ocks.org/mbostock/3244058#data.csvに従っています。外部JSONファイルからデータを取得するためにコードを変更し、特定の値の範囲に応じて矢印に4つの異なる色を設定したいと思います（条件に問題がなければ、簡単に実現できます）。これまでのところ、私はそれを達成することができませんでした。if条件内で色が変化しているように見えますが、想定どおりではありません（たとえば、黒を指定すると、以前より少し明るくなりますが、黒にはなりません）。助言がありますか？これまでのところ、私のコードは次のようになります。
var color_20c = d3.scale.category20c();
.......................
... SOME OTHER CODE ...
.......................
var session_data = [];
$.each( punchcard_data, function( playerIndex, player ) {
$.each( player.SessionData, function( sessionIndex, val ) {
var rotation;
var color_fill;
switch (val.direction) {
case "UP":
color_fill="#31a354" ;
rotation="";
break;
case "DOWN":
rotation="rotate(-180)";
break;
case "LEFT":
rotation="rotate(-90)";
break;
case "RIGHT":
rotation="rotate(90)";
break;
}
session_data.push({
x: val.time,
y:playerIndex,
direction:rotation,
color_fill:color_fill
});
});
});
そして私は持っています
... Some other code ...
.style("fill", function(d) { return color_20c(d.color_fill); })
必要に応じて、残りのコードを提供できます。
カラースケールを削除して直接色を適用すると、問題が発生します。カラースケールは、スカラー数を色にマップします。例：1から赤、2から黄色など。すでに色がわかっているので、カラースケールを使用する必要はありません。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加