javascript - 如何定义笔画的颜色

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/ )，依此类推。