如何使用d3生成尽可能多的颜色？ [英] How can I generate as many colors as I want using d3?

问题描述

我正在使用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 dy 
}）
 .color（d3.scale.category10（）。range（））
 .width（width）
 .height（height）; 
  
如何使用d3生成多少颜色？
解决方案
我有同样的问题，所以我写了一个小工具来生成知觉不同颜色的LOTS：类别颜色生成器。
 
 
 
此工具生成颜色列表。然后可以使用该列表：
  color = d3.scale.ordinal（）
 .domain（YOUR_DATA_CATEGORIES） 
 .range（[＃30c514，＃9321ff，...]）; 
  
还有一个 
 
 
以下是一些 generalized version  ：//jnnnnnn.blogspot.com.au/2017/02/distinct-colours-2.htmlrel =nofollow noreferrer>预先生成的示例颜色集。
 
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()
by exploring other options : 
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);
How can I generate as many colors as I want using d3?
解决方案
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.

Here are some pre-generated example colour sets.

                        
这篇关于如何使用d3生成尽可能多的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！