21

ヒートマップの線形カラー スケールを作成しようとしています。最初の色がデータの最小値に対応し、最後の色がデータの最大値に対応する特定の色の大規模なセットを通過するようにカラー スケールを使用したいと考えています。

ドメインに最小値と最大値の間の 17 の値を与えることでこれを行うことができることはわかっていますが、ユーザーがデータセットを変更できる場合 (したがって、ヒートマップの色を変更する場合)、これを動的に行う方法がわかりません。

本質的にはフォローしたいのですが、うまくいかないことはわかっています

var colorScale = d3.scale.linear()
   .range(["#6363FF", "#6373FF", "#63A3FF", "#63E3FF", "#63FFFB", "#63FFCB",
           "#63FF9B", "#63FF6B", "#7BFF63", "#BBFF63", "#DBFF63", "#FBFF63", 
           "#FFD363", "#FFB363", "#FF8363", "#FF7363", "#FF6364"])
   .domain([d3.min(dataset, function(d) {return d;}),
            d3.max(dataset, function(d) {return d;})]);

「ドメイン」を機能させるために何を入力する必要があるか教えてください。

編集：私は自分がやりたいことをするものを見つけました。RI を使用して、上記の 17 色の間の 256 色を designer.colors 関数で計算し、これを範囲に入れました。これにより、連続したカラースケールの感覚が得られます

var colorScale = d3.scale.linear()
    .range(["#6363FF", "#6364FF", "#6364FF", "#6365FF",
            "... several other lines with color codes ..."
            "#FF6764", "#FF6564", "#FF6464", "#FF6364"])
    .domain(d3.range(1,257));

var quantize = d3.scale.quantile()
   .range(d3.range(1,257))
   .domain([d3.min(dataset, function(d) {return d;}), 
            d3.max(dataset, function(d) {return d;})]);

今、私はこの方法で色を使うことができます

colorScale(quantize(dataset))

しかし、これをより少ないコード行で実行できるかどうか疑問に思っていますか?

4

3 に答える 3

29

問題を分割したい。最初に、0 ～ 1 を色にマッピングするヒートマップのスケールを定義します。次に、データセットを 0 ～ 1 にマップする 2 番目の (動的) スケールを定義します。その後、うろこを組み合わせてシェイプをペイントできます。

var colours = ["#6363FF", "#6373FF", "#63A3FF", "#63E3FF", "#63FFFB", "#63FFCB",
               "#63FF9B", "#63FF6B", "#7BFF63", "#BBFF63", "#DBFF63", "#FBFF63", 
               "#FFD363", "#FFB363", "#FF8363", "#FF7363", "#FF6364"];

var heatmapColour = d3.scale.linear()
  .domain(d3.range(0, 1, 1.0 / (colours.length - 1)))
  .range(colours);

// dynamic bit...
var c = d3.scale.linear().domain(d3.extent(dataset)).range([0,1]);

// use the heatmap to fill in a canvas or whatever you want to do...
canvas.append("svg:rect")
  .data(dataset)
  .enter()
  // snip...
  .style("fill", function(d) {
     return heatmapColour(c(d));

さらに、d3.extent 関数を使用して、データセットの最小値と最大値を一度に取得できます。

于 2013-07-16T09:24:12.483 に答える