스트로크 색상을 정의하는 방법

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이 선택되는 방법에 있습니다. 현재와 ​​마찬가지로 많은 값이 하나의 범주에 속하므로 하나의 색이 선택됩니다. 나는 일반적인 솔루션을 제공하기 위해 노력하겠습니다 아닌 하드 규모 : 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/).