d3.js学习笔记-04(比例尺、坐标轴)

最新推荐文章于 2021-09-22 16:29:17 发布

ddddot

最新推荐文章于 2021-09-22 16:29:17 发布

阅读量662

点赞数 3

分类专栏：精通d3js d3.js 可视化文章标签：可视化 d3.js

本文链接：https://blog.csdn.net/qq_40625543/article/details/108417844

版权

可视化同时被 3 个专栏收录

14 篇文章 2 订阅

订阅专栏

d3.js

12 篇文章 1 订阅

订阅专栏

精通d3js

9 篇文章 2 订阅

订阅专栏

d3.js学习笔记-04

1. 比例尺

1.1 定量比例尺(连续)

每个比例尺都需要指定定义域(domain)和值域(range)，定义域为连续，值域可连续可离散

1.1 线性比例尺

d3.scale.linear()：创建线性比例尺
linear(x)：输入一个在定义域内的值x，返回值域内对应的值。
linear.invert(y)：输入一个在值域内的值，返回定义域内对应的值。
linear.domain([numbers])：设定或获取定义域，可以超过两个数，但数量必须与range()相同。
linear.range([values])：设定或获取值域。
linear.rangeRound([values])：同range()，比例尺的输出值会进行四舍五入的运算，结果为整数。
linear.clamp([boolean])：默认为false，当该比例尺接收一个超出定义域范围内的值时，依然能够按照同样的计算方法计算得到一个值，这个值可能是超出值域范围的。如果为true，则任何超出值域范围的值，都会被收缩到值域范围内。
linear.nice([count])：改善定义域。例如，定义域为[0.500000543,0.899995435234]变为[0.5,0.9]。
linear.ticks([count])：设定或获取定义域内刻度。count 默认为10，如果定义域为[0,70]，则该函数返回[0, 10, 20, 30, 40, 50, 60, 70]。如果count设置为3，则返回[0, 20, 40, 60]。
linear.tickFormat(count,format])：主要用于设置定义域内刻度显示形式，如显示到小数点后两位，使用百分比的形式显示。

1.2 指数、对数比例尺

拥有线性比例尺的函数，额外增加表示指数或对数的函数，指数比例尺的定有和值域默认为[0, 1]

var pow = d3.scale.pow().exponent(3)  // 设置指数比例尺的指数为3
pow(2)  // 8

1.3 量子、分位比例尺

量子比例尺：定义域连续，值域离散，适合处理数值对应颜色的问题

    //定义量子化比例尺
    var quantize = d3.scale.quantize()
                .domain([50,0])
                .range(["#888","#666","#444","#222","#DO0"]);
    //定义圆的半径
    var r = [ 45,35,25,15,5];
    //给body中添加一个svg元素
    var svg = d3.select("body").append("svg")
                  .attr("width",400)
                  .attr("height", 400)
    //给svg里添加圆
    svg.selectAll("circie")
      .data (r)
      .enter()
      .append ("circle")
      .attr ("cx",function (d,i){ return 50 +i* 30;})
      .attr("cy" ,50)
      .attr("r", function (d) {return d; })
      .attr("fil1",function(d) {return quantize(d); });   // 使用比例尺，返回对应的颜色

在这里插入图片描述

分位比例尺：将连续的定义域映射到离散的值上
量子比例尺的分段值只与定义域的起始值和结束值有关；
分位比例尺的分段值还与定义域中存在的数值有关；
通过quantile.quantiles()查询分位比例尺的分段值；

// 量子比例尺
var quantize = d3.scale.quantize()
						.domain([0,2,4,10])
						.range([1,100])
// 分位比例尺
var quantile = d3.scale.quantile()
						.domain([0,2,4,10])
						.range([1,100])
console.log(quantize(3))  // 1
console.log(quantile(3))  // 100

1.4 阈值比例尺

d3.scale.threshold()：通过设定阈值，将连续的定义域映射到离散的值域，类似于量子/分位比例尺

varthreshold = d3.scale.threshold()
						.domain([10,20,30])  // 定义了三个阈值：10、20、30，分了四个区间
						.range(["red", "blue", "orange", "grey"])
threshold.invertExtent("red");   // 通过治愈计算定义域

1.2 序数比例尺

序数比例尺的定义域和值域都是离散的

d3.scale.ordinal() //构建序数比例尺
ordinal(x)：参数为定义域内的一个离散值，返回值域的一个离散值
ordinal.domain([values])：设置/获取定义域
ordinal.range([values])：设置/返回值域
ordinal.rangePoints(interval[, padding])：设置值域，接受连续区间，根据定义域中的离散值将数据分段
ordinal.rangeRoundPoints(interval[, padding])：同rangePoints，只是将结果取整
ordinal.rangeBands(interval[, padding[, outerPadding]l)：同rangePoints()，也是接收一个连续的区间，然后根据定义域中离散值的数量将其分段，但是其分段方法是不同的。
ordinal.rangeRoundBands(interval[, padding[, outerPadding]])：同rangeBands()，但是会将结果取整。
ordinal.rangeBand()：返回使用rangeBands()设定后每一段的宽度。
ordinal.rangeExtend()：返回一个数组，数组里存有值域的最大值和最小值。
example

var ordinal = d3.scale.ordinal()
						.domain([1,2,3,4,5])
						.range([10,20,30,40,50])

获取颜色的序数比例尺

d3.scale.category10()：10种颜色，以数组形式返回
d3.scale.category20()：20种颜色
d3.scale.category20b()：20种颜色
d3.scale.category20c()：20种颜色
example

var color = d3.scale.category10();

console.log( color(1) );       //输出颜色中的第一个

.attr("fill".function(d,i){
    return color(i);          //color是颜色比例尺，i是被绑定数据的索引hao
})

1.3 坐标轴

d3.svg.axis()：创建一个默认的新坐标轴。
axis(selection)：指定选择集，该选择集需要包含有<svg>或<g>元素。
axis.scale([scale])：设置/获取坐标轴的比例尺。
axis.orient([orientation])：设置/获取坐标轴的方向，有四个值: top、bottom、left、right。top表示刻度方向向上，bottom表示刻度方向向下，left表示垂直坐标轴的刻度在直线右方，right表示垂直坐标轴的刻度在直线左方。
axis.ticks([argument…])：设置/获取坐标轴的分隔数，默认为10。例如，设定为5，则坐标轴上的刻度数量为6，分段数为5。
axis.tickValues([values])：设置/获取坐标轴的指定刻度。例如，参数为[1,2,3,6,7,8]，则在这几个值上会有刻度。
axis.tickSize([inner, outer])：设置/获取坐标轴的内外刻度的长度。默认都为6。
axis.innerTickSize([size])：设置/获取坐标轴的内刻度的长度。
axis.outerTickSize([size])：设置/获取坐标轴的外刻度的长度，外刻度指两端的刻度。
axis.tickFormat([format])：设定或获取刻度的格式。
example
坐标轴的所有图形元素需要放在<svg>或者<g>里面，建议使用g元素控制坐标轴

.axis path
.axis line{
	fill:none;
	stroke:black;
	shape-rendering:crispEdges;
}

.axis text{
	font-family:sans-serif;
	font-size:11px;
}

var width=600
var height=600
var svg = d3.select("body").append("svg")
				.attr("width",width)
				.attr("height",height)
// 定义线性比例尺
var xScale=d3.scale.linear()
					.domain([0,10])
					.range([0,300])
// 定义刻度轴
var axis=d3.svg.axis()  // 创建一个默认的坐标轴
				.scale(xScale)   // 设置坐标轴比例尺
				.orient("bottom") // 刻度向下
// 在svg中添加一个包含坐标轴各元素的g元素
var gAxis=svg.append("g")
				.attr("transform", "translate(80,80)");  // 平移到（80，80）
				.sttr("calss","axis")
// 在选择集gAxis中添加坐标轴
axis(gAxis)

在这里插入图片描述

刻度

tickSize(a, b)：设置内部刻度和首尾刻度的size，参数表示内部刻度的直线长度，b表示首尾两个刻度的直线长度，可以分别使用innerTickSize()和outerTickSize()

var axisTop = d3.avg.axis()
					.scale(scale)  // 设置比例尺
					.orient("top")  // 设置刻度方向
					.tick(5)  // 设置刻度数量
					.tickSize(2, 4)  // 设置刻度大小
					.tickFormat(d3.format("$0.1f"))  // 设置刻度格式

在这里插入图片描述

2 绘制散点图

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <!-- <script src="../d3.v3.min.js"></script> -->
    <script src="https://d3js.org/d3.v3.min.js"></script>
  </head>
  <style>
    .axis path {
      /* 设置坐标轴横线的样式 */
      stroke: blue;
      fill: none;
      shape-rendering: crispEdges;
    }

    .axis line {
      /* 设置刻度的样式*/
      stroke: red;
      fill: none;
      shape-rendering: crispEdges;
    }

    .axis text {
      /*设置刻度文本的样式 */
      font-size: 12px;
    }
  </style>

  <body>
    <script>
      // 数据集
      var center = [
        [0.5, 0.5],
        [0.7, 0.8],
        [0.4, 0.9],
        [0.11, 0.32],
        [0.88, 0.25],
        [0.75, 0.12],
        [0.5, 0.1],
        [0.2, 0.3],
        [0.4, 0.1],
        [0.6, 0.7],
      ];

      var padding = { left: 100, top: 100 }; // 绘图 区域的边距
      var svg = d3
        .select("body")
        .append("svg")
        .attr("width", 500)
        .attr("height", 500);

      // 定义比例尺
      // 使用d3.max计算坐标轴的范围
      // 对于center数组的每一项，返回其子数组的第一项组成一个新数组，再求新数组的最大值
      // 能够避免某一个点刚好处于坐标轴的边缘上
      var xScale = d3.scale
        .linear()
        .domain([0,1.2 * d3.max(center, function (d) {
              console.log(d[0]);
              return d[0];
            }),
        ])
        .range([0, 300]);
      // y轴比例尺
      var yScale = d3.scale
        .linear()
        .domain([ 0,1.2 * d3.max(center, function (d) {
              return d[1];
            }),
        ])
        .range([300, 0]);  //⭐⭐⭐

      // 定义坐标轴
      var xAxis = d3.svg
        .axis()
        .scale(xScale)
        .orient("bottom") // 设置刻度方向
        .ticks(5) // 设置刻度数量
        .tickSize(4, 6) // 设置首尾刻度大小为6，中间刻度大小为4
        .tickFormat(d3.format(".1f")); // 设置刻度文本，保留一位小数

      var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5);

      // 添加x轴
      svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(105,405)")
        .call(xAxis);
      // 添加y轴
      svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(105,105)")
        .call(yAxis);


      // 定义颜色序数比例尺
      var arrColor = d3.scale.category10()
      // 绘制散点
      var circle = svg
        .selectAll("circle")
        .data(center)
        .enter()   // 重点：enter的用法，当元素的数量小于数组的数量的时候，使用enter+append添加元素
        .append("circle")
        .attr("cx", function (d, i) {  // 圆心的x
          return xScale(d[0]) + padding.left;
        })
        .attr("cy", function (d, i) {  // 圆心的y
          return padding.top + yScale(d[1]);
        })
        .attr("r", 5)   // 圆的半径
        .attr("fill", function(d,i){
          return arrColor(i);  // 是用亚瑟序数比例尺生成的颜色
        });
    </script>
  </body>
</html>

执行结果
在这里插入图片描述

References

[1] 吕之华.精通D3.js：交互式数据可视化高级编程[M].北京：电子工业出版社,2015∶105-127.

ddddot

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
d3.js学习笔记-04(比例尺、坐标轴)

d3.js学习笔记-02目录d3.js学习笔记-021. 比例尺1.1 定量比例尺(连续)1.1 线性比例尺1.2 指数、对数比例尺1.3 量子、分位比例尺References1. 比例尺1.1 定量比例尺(连续)每个比例尺都需要指定定义域(domain)和值域(range)1.1 线性比例尺d3.scale.linear()：创建线性比例尺linear(x)：输入一个在定义域内的值x，返回值域内对应的值。linear.invert(y)：输入一个在值域内的值，返回定义域内对应的值。l
复制链接

扫一扫