d3で凡例を動的に作成

Question

d3.scale.quantize()とcolorBrewerを使用して、カラースケールを取得しています。

.... 
var extent = d3.extent(collection.features, function(d) { 
     return d.properties.mean; 
    }); 

var colorScale = d3.scale.quantize() 
    .domain(extent) 
    .range(colorbrewer.RdYlBu[8]); 
... 

これは私に8の異なる色を与え、与えられた値の特定の範囲に対応します。 私はその後、私は値の範囲は色"#fdae61"または"#fee090"に対応しているかを知るにはどうすればよいsvg

.... 
.attr("fill-opacity", 0.1) 
.attr("stroke", "grey") 
.style("fill", function(d) { 
    return colorScale(d.properties.mean); 
}); 
... 

を埋めるためにcoloScaleを使うのか？これらの値にはどうすればアクセスできますか？ 8から3への入力色の数を変更すると、色の尺度で使用される色、つまりRdYlBuからYlGnに変更すると、凡例を動的に変更したいと考えています。

私は非常に近いと思います。 私は唯一の私は、簡単に私の凡例を作成するために使用できる対応する値でdomainを入力する必要があり、この

var scale = d3.scale.ordinal() 
    .domain() 
    .range(colorScale.range()); 

を持っている... しかし、私は動的に抽出する方法がわかりません。 colorScale.invertExtent("#fdae61")のようなものは、私がカラースケールを変更するときは常に色などを変更する必要があるので、静的にすることです。

Answer 1

自動凡例を作成する場合は、colorScaleドメインと範囲に基づいてデータセットを作成し、このデータセットを凡例にバインドすることをお勧めします。このようにして、ドメインまたはスケールの範囲を変更するたびにデータセットが変更されます。

var colorScale = d3.scale.quantize() 
    .domain([0, 500]) 
    .range(["#d73027", "#f46d43", "#fdae61", "#fee090", "#e0f3f8", 
      "#abd9e9", "#74add1", "#4575b4"]);//this is colorBrewer.RdYlBu[8] 

あなたは値のすべての範囲を持つ配列を作成することができます。あなたは、ドメインは、0から500まで行くと、このスケールを、持っている場合例えば

、。これはcolorRangeという名前の、私たちのデータセットになります。私たちはこの配列をCONSOLE.LOG場合、前のコードに基づいて

var colorRange = [];  
for(var i = 0; i < colorScale.range().length; i++){ 
    colorRange.push(colorScale.invertExtent(colorScale.range()[i])[0]); 
}; 

、我々が得る：

あなたの8色に対応するドメイン値が含まれてい

console.log(colorRange);// returns [0, 62.5, 125, 187.5, 250, 312.5, 375, 437.5] 

。例えば、我々はcolorScale範囲から2つの色を削除した場合、我々が今持っている：あなたはこのcolorRange配列を持っていたら

console.log(colorRange);// returns [0, 83.333, 166.666, 250, 333.333, 416.666] 

は、あなただけの伝説のドメイン値を持っていない、しかし、あなたは簡単にも色を設定することができ、

colorScale(colorRange[i]) 

ここで、iは最初の値から最後の値になります。

PS：代わりに分位数スケールを使用していた場合は、厄介なforループを削除し、単に[0].concat(colorScale.quantiles())を使用して配列を作成することができます。

Answer 2

データオブジェクトに対しても動的プロパティを設定できます。次に、データオブジェクト値にアクセスしてこれらのプロパティを取得します。

何かのように：あなたは、例えば、それを必要な場所

.style("fill", function(d) { 
    var color = colorScale(d.properties.mean); 
    // put the generated color on your data object 
    d.properties.myFillColor = color; 
    return color 
}); 

そして、それは、基礎となるデータオブジェクトからこのmyFillColorを取り出すの問題です伝説の中で