ストロークの色を定義する方法

Question

この中でfiddleストロークの色を変更するにはどうすればよいですか？

私はこのコードを試してみましたが、それは、色変更されません：

var colors = ["#F0E5FF","#E1CCFF","#C499FF","#AC79F2","#8D4CE5","#6100E5","#C94D8C"]; 

var colorScaleDomain = [100, 300, 1000, 10000, 50000, 600000]; 

var colorScale = d3.scale.threshold() 
    .domain(colorScaleDomain) 
    .range(colors); 

link.style("stroke", function(d){ 
    return colorScale(d[0].size) 
}); 

私のコードで間違って何を？

Answer 1

この問題は、データの「サイズ」属性に関してcolorScaleDomainがどのように選択されるかにあります。現在の方法では、多くの値が1つのカテゴリに分類されるため、1つの色が選択されます。私は一般的なソリューションを提供しようとするでしょう、ないハードコードされた規模： https://jsfiddle.net/mkaran/3adu1u2n/ 、colorScaleDomainがあなたの色スケールの

var colors = ["#F0E5FF","#E1CCFF","#C499FF","#AC79F2","#8D4CE5","#6100E5","#C94D8C"]; 
var maxSize = d3.max(classes, function(d) { return +d.size;}); 
var colorScaleDomain = []; 
var bin = Math.round(maxSize/colors.length); 
for(let i=0; i < colors.length; i++){ 
    colorScaleDomain.push(bin*i) 
} 
console.log(colorScaleDomain) 
var colorScale = d3.scale.threshold() 
    .domain(colorScaleDomain) 
    .range(colors); 

例の長さと同じ数の等しいビンを作成することによって計算されます。[0, 3513, 7026, 10539, 14052, 17565, 21078]

色を別々にグループ化する場合は、サイズとは異なる変数を使用してみることができます。例えば。 d.imports.lengthであり、これらは異なるようにグループ化されます（https://jsfiddle.net/mkaran/snec9kgf/）。