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

问题描述

我正在使用 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 生成任意数量的颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！