问题描述
我正在使用 d3.js 构建饼图,并对大数据集进行可视化.有超过 137 个项目 可以在图表上可视化.我只有10 种颜色使用此功能.
I'm building a pie chart using d3.js, and visualizing a big data set. There are more than 137 items to visualize on the chart. I have just 10 colors using this function.
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 生成任意数量的颜色?
How can I generate as many colors as I want using d3?
推荐答案
更新:d3v5 现在包含连续色阶,例如 d3.interpolateSpectral.这可能是最简单的选择.
Update: d3v5 now includes continuous color scales, such as d3.interpolateSpectral. That's probably the simplest option.
我遇到了同样的问题,所以我写了一个小工具来生成很多感知上不同的颜色:类别颜色生成器.
I had the same problem, so I wrote a little tool to generate LOTS of perceptually-different colors: category color generator.
此工具生成颜色列表.然后您可以使用该列表,如:
This tool produces a list of colors. You can then use that list like:
color = d3.scale.ordinal()
.domain(YOUR_DATA_CATEGORIES)
.range(["#30c514", "#9321ff", ...]);
如果两个亮度不够,还有一个通用版本.
There is also a generalised version if two lightnesses is not enough.
以下是一些预先生成的示例颜色集.
这篇关于如何使用 d3 生成任意数量的颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!