将D3类别颜色分配给对象数组

Question

我想为数组中的每个对象分配一个颜色属性。还有其他优雅或有效的方法吗？

var objArr=[ //Need to attach different colors to each object in arry
    {label:"a"},
    {label:"b"},
    {label:"c"}
];
var domain_labels = [];
for(var i=0;i<objArr.length;i++){
    domain_labels.push(objArr[i].label)
}
var colors = d3.scale.category10();
colors.domain(domain_labels);
for(var i=0;i<objArr.length;i++){
    objArr[i].color = colors(domain_labels[i]) 
}
console.log(objArr);//[{"label":"a","color":"#1f77b4"},{"label":"b","color":"#ff7f0e"},{"label":"c","color":"#2ca02c"}]

Answer 1

这是您可以根据标签分配颜色的方式来分配颜色的方式，但是如果您的所有标签都是唯一的，那么您仍然需要为许多标签带有一系列颜色。这是小提琴

var objArr=[{label:"a"},{label:"b"},{label:"c"}];//Need to attach different colors to each object in arry
const map1 = objArr.map(x => x.label);
console.log(map1)
var colScale= d3.scale.ordinal().range(["#1f77b4","#ff7f0e","#2ca02c"]).domain(map1)
console.log(colScale("a"));
console.log(colScale("c"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

d3还具有您可以使用

的颜色尺度和颜色尺寸

var colScale = d3.scale.ordinal()
    .domain(map1)
    .range(colorbrewer.RdBu[9]);

参考：d3.scales