d3常用比例尺总结

d3.js是v4版本

目录

1、scaleTime -创建一个线性的时间比例尺. 

2、scaleLinear-创建一个定量的线性比例尺.

3、scaleOrdinal - 创建一个无序序数比例尺

4、scaleBand - 创建一个有序序数比例尺

5、scaleQuantize - 创建一个量化比例尺

6、scalePow - 创建一个定量的指数比例尺.    

7、scaleSqrt - 创建一个指数为 0.5 的指数比例尺.

8、scaleLog - 创建一个对数比例尺.

9、scaleIdentity - 创建一个定量的恒等比例尺.

10、scaleQuantile - 创建一个分位数比例尺.

11、scaleSequential -  创建一个顺序量表比例尺.

12、坐标轴定义及常用函数

---

• 1、scaleTime -创建一个线性的时间比例尺. 

 应用场景：常用于折线图时间轴刻度

d3.scaleTime().domain([start1,end1]) // 定义域

                           .range([start2,end2])//值域

 // nice  nice可以规范输出   
const xScale = d3
        .scaleTime()
        .domain([new Date(domain.xScale[0]), new Date(domain.xScale[23])]) // input
        .range([0, width]);
        // .nice(); // output  

// ticks设置刻度值
// axisBottom x轴Bottom位置绘制坐标轴

g
        .append('g')
        .attr('class', 'x axis')
        .attr('transform', 'translate(0,' + height + ')')
        .call(d3.axisBottom(xScale).ticks(23)) 
        .attr('class', 'd3-line-axis'); // Create an axis component with d3.axisBottom

scaleUtc  - 依据世界标准时间(UTC)来计算的

• 2、scaleLinear-创建一个定量的线性比例尺.

应用场景：数量统计图数量显示刻度

d3.scaleLinear().domain([start1,end1]) // 定义域

                           .range([start2,end2])//值域

   // me.getMaxyScale(yScaleDomain) 值域  可用d3.max获取
   const yScale = d3
        .scaleLinear()
        .domain([0, me.getMaxyScale(yScaleDomain)]) // input
        .range([height, 0]);
        // .nice(); // 规范数据输出 output

//axisLeft 坐标绘制y轴刻度
 g
        .append('g')
        .attr('class', 'y axis')
        .call(d3.axisLeft(yScale).ticks(4))
        .attr('class', 'd3-line-axis'); // Create an axis component with d3.axisLeft

也可设置发散的定义域和值域

var color = d3.scaleLinear()
    .domain([-1, 0, 1])
    .range(["red", "white", "green"]);


color(-0.5); // "rgb(255, 128, 128)"
color(+0.5); // "rgb(128, 192, 128)"

• 3、scaleOrdinal - 创建一个无序序数比例尺

应用场景：定义域和值域是不连续的，都是离散的。例如：一些柱状统计图

const scaleO = d3.scaleOrdinal().domain([1,2,3,4,5]) // 定义域

                           .range(["red", "blue", "green", "yellow", "black"])//值域 个数需一一对应

scaleO(1); //red
scaleO(3); //green
scaleO(5); //black

一一对应

注意：如果scaleO(6); // red  也可以正常输出，注意输入的数据是否正确

• 4、scaleBand - 创建一个有序序数比例尺

应用场景：定义域和值域是不连续的，都是离散的。例如：一些柱状统计图

const scaleB = d3.scaleBand().domain([1,2,3,4,5]) // 定义域

                           .range([0,100])//值域  这个参数和scaleOrdinal不同，是一个范围

scaleB(1) // 输出:0
scaleB(2) // 输出:20
scaleB(5) // 输出:80
// 100被平均分成5段，每段映射的值20

并非一一对应 

 

• 5、scaleQuantize - 创建一个量化比例尺

var scaleQ= d3.scaleQuantize()
    .domain([10, 100]) // 连续的
    .range([1, 2, 4]); // 离散的

scaleQ(20); // 1   10-40
scaleQ(50); // 2   40-70
scaleQ(80); // 4   70-100

• 6、scalePow - 创建一个定量的指数比例尺.    

使用y = m * x^k + b这个数学函数来表达domain和range之间的数学函数关系。指数k使用.exponent()来设定

var scaleP= d3.scalePow().exponent(0.5).domain([0, 100]).range([0, 30]); 
scaleP(0); // returns 0 
scaleP(50); // returns 21.21... 
scaleP(100); // returns 30

• 7、scaleSqrt - 创建一个指数为 0.5 的指数比例尺.

是一种scalePow的特殊形式(k=0.5)通常用于通过面积来表征圆（而不用半径）(当使用圆的大小来表达数据值的大小时，通常最佳实践是使用和数据等比例的面积而非半径来表达）

var scaleSq= d3.scaleSqrt()
  .domain([0, 100])
  .range([0, 30]);

scaleSq(0);   // returns 0
scaleSq(50);  // returns 21.21...
scaleSq(100); // returns 30

• 8、scaleLog - 创建一个对数比例尺.

 使用数学对数函数(y = m * log(x) + b)来映射domain和range.如果数据之间有指数关系的话，这个log比例尺最适合

var scaleL= d3.scaleLog()
  .domain([10, 100000])
  .range([0, 600]);

scaleL(10);     // returns 0
scaleL(100);    // returns 150
scaleL(1000);   // returns 300
scaleL(100000); // returns 600

• 9、scaleIdentity - 创建一个定量的恒等比例尺.

• 10、scaleQuantile - 创建一个分位数比例尺.

scaleQuantile 将输入的连续性domain值映射为离散的值。domain是由数组来定义:

var myData = [0, 5, 7, 10, 20, 30, 35, 40, 60, 62, 65, 70, 80, 90, 100];

var scaleQ= d3.scaleQuantile()
  .domain(myData)
  .range(['lightblue', 'orange', 'lightgreen']);

scaleQ(0);   // returns 'lightblue'
scaleQ(20);  // returns 'lightblue'
scaleQ(30);  // returns 'orange'
scaleQ(65);  // returns 'lightgreen'

• 11、scaleSequential -  创建一个顺序量表比例尺.

应用场景：用于将连续性的数据映射为由预定义或者定制的插值函数决定的range.(一个插值函数是一个接受0到1之间的数值而输出一个在两个数字，两个颜色值或者两个字符串之间的插值的函数）我们可以使用d3.interpolateRainbow来创建彩虹色系图

var scaleS= d3.scaleSequential()
  .domain([0, 100])
  .interpolator(d3.interpolateRainbow);

scaleS(0);   // returns 'rgb(110, 64, 170)'
scaleS(50);  // returns 'rgb(175, 240, 91)'
scaleS(100); // returns 'rgb(110, 64, 170)'

• 12、坐标轴定义及常用函数

d3.axisTop(scale)——创建一个top-axis，轴在水平方向绘制；
d3.axisBottom(scale)——创建一个bottom-axis，轴在水平方向绘制；
d3.axisRight(scale)——创建一个right-axis，轴在垂直方向绘制；
d3.axisLeft(scale)——创建一个left-axis，轴在垂直方向绘制；

d3.max(array) ——获取最大值
d3.min(array)——获取最小值

invert()与invertExtent() —— 通过range获取domain的值（只针对连续性比例尺有效）

let scale = d3.scaleLinear().domain([1,5]).range([0,100])
scale.invert(50) // 输出:3

let scale2 = d3.scaleQuantize().domain([0,10]).range(['small', 'big'])
scale2.invertExtent('small') // 输出:[0,5]

ticks(number) —— 设置显示几个刻度

d3.axisBottom(xScale).ticks(23)

tickValues(array) —— 设置显示指定刻度

d3.axisBottom(xScale).tickValues([6, 7, 8, 9, 10])

tickPadding(number) —— 设置刻度线和刻度文字之间的间隔，这个值默认为3

d3.axisBottom(xScale)
        .tickValues([6, 7, 8, 9, 10])
        .tickSize(5)
        .tickPadding(5)
        .tickFormat(d3.format("$0.1f"));

tickSize(number)、tickSizeInner(number)和tickSizeOuter(number) —— 设置坐标轴上的刻度线的长短，默认为6。

nice  —— 设置刻度线成理想状态

d3
        .scaleTime()
        .domain([new Date(domain.xScale[0]), new Date(domain.xScale[23])]) // input
        .range([0, width]);
        // .nice(); // output

tickFormat —— 格式化格式

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(xScale).ticks(23).tickFormat(d3.timeFormat("%I %p")))
	.attr('class', 'd3-line-axis'); // Create an axis component with d3.axisBottom

时间格式

• %Y - for year boundaries, such as 2011.
• %B - for month boundaries, such as February.
• %b %d - for week boundaries, such as Feb 06.
• %a %d - for day boundaries, such as Mon 07.
• %I %p - for hour boundaries, such as 01 AM.
• %I:%M - for minute boundaries, such as 01:23.
• :%S - for second boundaries, such as :45.
• .%L - milliseconds for all other times, such as .012.

参考：https://www.cnblogs.com/kidsitcn/p/7182274.html

https://github.com/xswei/d3-scale/blob/master/README.md#continuous_interpolate

demo

<!DOCTYPE html>
<meta charset="utf-8">

<style type="text/css">
/* 13. Basic Styling with CSS */

/* Style the lines by removing the fill and applying a stroke */
.line {
    fill: none;
    stroke: #ffab00;
    stroke-width: 3;
}

/* Style the dots by assigning a fill and stroke */
.dot {
    fill: #ffab00;
    stroke: #fff;
}
.d3-line-axis path, .d3-line-axis line{
  stroke: blue;
}
.d3-line-axis text{
  font-family: sans-serif;
  font-size: 12px;
  fill: blue;
}

</style>
<!-- Body tag is where we will append our SVG and SVG objects-->
<body>
</body>

<!-- Load in the d3 library -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

// 2. Use the margin convention practice 
var margin = {top: 50, right: 50, bottom: 50, left: 50}
  , width = window.innerWidth - margin.left - margin.right // Use the window's width 
  , height = window.innerHeight - margin.top - margin.bottom; // Use the window's height

// The number of datapoints
var n = 25;
var curDate = new Date();
var preDate = new Date(curDate.getTime() - 24*60*60*1000); //前一天
var nextDate = new Date(curDate.getTime() + 24*60*60*1000); //后一天
// 5. X scale will use the index of our data
var xScale = d3.scaleTime()
    .domain([preDate, curDate]) // input
    .range([0, width])
	.nice(); // output

// 6. Y scale will use the randomly generate number 
var yScale = d3.scaleLinear()
    .domain([0, 1]) // input 
    .range([height, 0]); // output 

// 7. d3's line generator
var line = d3.line()
    .x(function(d, i) { 
		return xScale(new Date(d.x)); 
	}) // set the x values for the line generator
    .y(function(d) { return yScale(d.y); }) // set the y values for the line generator 
    .curve(d3.curveMonotoneX) // apply smoothing to the line

// 8. An array of objects of length N. Each object has key -> value pair, the key being "y" and the value is a random number
var dataset = d3.range(n).map(function(d, i) { 
	return {
		"x": new Date(curDate.getTime() - i*60*60*1000),
		"y": d3.randomUniform(1)() 
	} 
})

// 1. Add the SVG to the page and employ #2
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
	.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// 3. Call the x axis in a group tag
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(xScale).ticks(24).tickFormat(d3.timeFormat("%I %p")))
	.attr('class', 'd3-line-axis'); // Create an axis component with d3.axisBottom

// 4. Call the y axis in a group tag
svg.append("g")
    .attr("class", "y axis")
    .call(d3.axisLeft(yScale).ticks(4))
	.attr('class', 'd3-line-axis'); // Create an axis component with d3.axisLeft

// 9. Append the path, bind the data, and call the line generator 
svg.append("path")
    .datum(dataset) // 10. Binds data to the line 
    .attr("class", "line") // Assign a class for styling 
    .attr("d", line); // 11. Calls the line generator 

// 12. Appends a circle for each datapoint 
svg.selectAll(".dot")
    .data(dataset)
    .enter().append("circle") // Uses the enter().append() method
    .attr("class", "dot") // Assign a class for styling
    .attr("cx", function(d, i) { return xScale(i) })
    .attr("cy", function(d) { return yScale(d.y) })
    .attr("r", 5);

</script>