D3 数据可视化004——有序尺度 scaleOrdinal

上篇文章中，学习了有关尺度 scale 的概念以及常用的连续尺度，这篇接着分享有序尺度。当我们想把数据 someData = [12, 45, 56, 78, 102] 渲染为一种等级状态 比如 [绿色，深绿，蓝色，深蓝，紫色]，这也是绘制图表常见的情形之一，这时使用D3提供的有序尺度 scaleOrdinal 就相当合适。

来看代码，重点关注 d3.scaleOrdinal() 

const someData = [12, 45, 56, 78, 102]
const someColors = ['#a3eab9', '#1a903f', '#55a8ed', '#105d9d', '#a02ee2']

// 重点来了，通过scaleOrdinal生成有序尺度
const colorOrdinal = d3.scaleOrdinal().range(someColors)

// 不懂的同学翻看前几篇文章补下基础
const render = (data, scale) => {
    d3.select('#d3Container').selectAll('div').data(data)
    .enter().append('div')
            .classed('cell', true)
            .style('background-color', (d) => 
                    scale(d).indexOf('#') >= 0 ? scale(d) : 'orange')
            .text(d => d + '😊' + scale(d))
}

render(someData, colorOrdinal)

 const colorOrdinal = d3.scaleOrdinal().range(someColors) ，注意在调用 scaleOrdinal 时，用作渲染为图形的数据，比如这里的someColors ，必须放在range()中，作为值域返回。关于值域，定义域可以参考scale 概念。

const colorOrdinal = d3.scaleOrdinal().range(someColors) 创建了一个有序颜色尺度

如果我们给出的数据长度小于颜色尺度长或者大于颜色尺度，D3 会按照小则截取，大则循环的原则进行渲染

D3提供了一些好用的有序颜色尺度 Categorical schemes

•  d3.schemeAccent
   render(someData, d3.scaleOrdinal(d3.schemeAccent))
   

  

•  d3.schemeCategory10
   

  

• d3.schemePaired 
   

  

 

 有序尺度的几种写法

1. d3.scaleOrdinal().domain(someData).range(valData)  //完整写法

2. d3.scaleOrdinal(someData, valData) //省去定义域和值域名称

3. d3.scaleOrdinal(valData).domain(someData) //将值域直接传入ordinal中

4. d3.scaleOrdinal(valData) // 忽略定义域，在调用时按顺序对应