时间戳

首页 > 解决方案 > d3当长度不同时如何在数字到颜色之间缩放

d3.js - d3当长度不同时如何在数字到颜色之间缩放

问题描述

d3.scaleOrdinal当域和范围长度不同时如何使用？

我有这个颜色数组：

 const color = [ 'red', 'green', 'blue' ];

当我想将数字缩放到它时，当我有 3 个数字时很容易

scaleOrdinal().domain([1,2,3]).range(color)

但是如果我有 10 个号码，我该怎么办？我希望数字 1、2、3 将变为红色，4、5、6 将变为绿色，而 7、8、9 将变为蓝色。

我怎样才能做到这一点？我正在使用d3v4

标签： d3.js

解决方案

写下你自己的比例：

const color = [ 'red', 'green', 'blue' ];

var colorScale = d3.scaleOrdinal().domain(d3.range(1,11)).range(color);

function ordinalGroup(ordinalBase) {
  return function(v) {
    var domain = ordinalBase.domain();
    var range = ordinalBase.range();
    var idx = domain.indexOf(v);
    if (idx === -1) return range[0];
    return range[Math.floor(idx/(domain.length/range.length))];
  };
}

var colorGroup = ordinalGroup(colorScale);

console.log(colorScale.domain().map(d => [d, colorGroup(d)] ));
<script src="https://d3js.org/d3.v4.min.js"></script>

推荐阅读