如何使用d3生成任意数量的颜色？

Question

我正在使用d3.js构建饼图，并可视化一个大数据集。有更多的137个项目，在图表上可视化。我有10颜色使用这个函数。

d3.scale.category10().range()

通过探索其他选项：https://github.com/mbostock/d3/wiki/Ordinal-Scales

d3.scale.category20().range()

var chart = nv.models.pieChart()
    .x(function(d) {
        return d.key
    })
    .y(function(d) {
        return d.y
    })
    .color(d3.scale.category10().range())
    .width(width)
    .height(height);

如何使用d3生成任意数量的颜色？

Answer 1

Update：d3v5现在包括连续的色标，如d3.interpolateSpectral。这可能是最简单的选择。

我也有同样的问题，所以我写了一个小工具来生成很多感知不同的颜色：类别颜色发生器。

此工具生成一个颜色列表。然后，您可以使用该列表如下：

color = d3.scale.ordinal()
    .domain(YOUR_DATA_CATEGORIES)
    .range(["#30c514", "#9321ff", ...]);

如果两盏灯不够，也有一个泛化版本。

这里有一些预先生成的示例颜色集。

Answer 2

由于您使用的类别很多，所以不可能使用明显不同的颜色。好消息是，在饼图中，每个饼图旁边只有两种颜色，那么所有颜色都不需要不同，只是相邻的颜色。

我要做的是生成两个不同的色阶，都使用d3.interpolateHcl()。HCL和Lab是生成自然颜色梯度的更好的颜色模型，也是category20()用来生成明显不同颜色的颜色模型。

var colorScales =[
  d3.scale.linear()
    .interpolate(d3.interpolateHcl) 
    .range(["#9AF768", "#F27A4D"]),
  d3.scale.linear()
    //.domain([0,1])
    .interpolate(d3.interpolateHcl) 
    .range(["#112231","#3C769D"])
];

将您想要的颜色放到range([...])中，并应用这些函数，添加一些随机性。我使用数据的索引i在两种颜色方案之间交替使用。

.color(function(d,i) {
  return colorScales[i%2]       
          (Math.random());
})

更多关于颜色理论和颜色模型：

• https://gist.github.com/mbostock/3014589
• http://vis4.net/blog/posts/avoid-equidistant-hsv-colors
• https://eagereyes.org/basics/rainbow-color-map
• http://www.paulvanslembrouck.com/2011/theres-something-about-yellow

和一个很好的HCL颜色空间选择器：

• http://tristen.ca/hcl-picker

更新

较新版本的d3提供了更多的颜色方案和插值器有着更复杂的模型。有一些类型的方案，我认为这个用例最有用的是序列多色调内插器。

我开发了一个交互式小部件来探索这些缩放和内插器，同时改变颜色的数量。见下文。

注意，这些方案也很难提供几种明显不同的颜色。

const categorical = [{
    "name": "interpolateViridis"  },
  { "name": "interpolateInferno"  },
  { "name": "interpolateMagma"    },
  { "name": "interpolatePlasma"   },
  { "name": "interpolateWarm"     },
  { "name": "interpolateCool"     },
  { "name": "interpolateCubehelixDefault"  },
  { "name": "interpolateRainbow"  },
  { "name": "interpolateSinebow"  }
]

const width = 600,
  height = 80;

const svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")


const unit = (s) => width / s.n;
const state = {
  n: 12,
  colorScale: d3.scaleSequential(d3[categorical[8].name])
};

const update = () => {

  bars.data(d3.range(0, 1, 1 / state.n))
    .enter().append("rect")
    .attr("class", "bars")
    .attr("y", 0)
    .attr("height", height)
    .attr("width", unit(state))
    .attr("x", (d, i) => i * unit(state))
    .style("fill", state.colorScale)
    .merge(bars);
    
  bars.exit().remove();

}

const bars = svg.selectAll(".bars");

update()

const sequentialButtons = d3.select(".categoricalButtons")
  .selectAll("button")
  .data(categorical)
  .enter().append("button")
  .text(d => d.name)
  .on("click",  (buttonValue) =>{ 
    state.colorScale = d3.scaleSequential(d3[buttonValue.name]);
    update();
    });

const itemsInput = d3.select('#items')
  .on('change',(d,i,arr)=>{
    state.n = arr[i].value;
    update();
    });

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

<div class="categoricalButtons">Color Scales: </div>
<div><input id="items" type="number" value="12"></div>

​

Answer 3

我们可以使用自定义颜色，例如，您可以创建您自己的颜色范围：.range(["#fff","#000","#333"]);。下面是一个类似的StackOverflow线程：https://stackoverflow.com/a/13013162/1848540