d3入门篇（三）：比例尺坐标轴

tomato 发布于2019-08-23 14:03 / 1868人阅读

摘要：为了根据显示刻度灵活变化宽高，而不是定死，特别是数据差异性很大的时候，我们希望图表显示范围都在画布里面，这时就会引入比例尺的概念来进行缩放。根据这些规则，会为我们返回一个比例尺函数。

这篇文章继续介绍d3的基础知识

比例尺

在绘制柱状图时，我们往往会定义很大的画布，然而我们要可视化的数据确很小，这时会出现很多留白
的情况。为了根据显示刻度灵活变化宽高，而不是定死，特别是数据差异性很大的时候，我们希望图表
显示范围都在画布里面，这时就会引入**比例尺**的概念来进行缩放（scale）。

我们在数学里有函数的概念y=f(x),定义域为x（输入）的取值范围，值域为y（输出）的取值范围。输
入x,根据函数规则会输出一个y。

d3中的比例尺与数学中的函数类似，首先我们需要指定函数类别，即比例尺的类别，如scaleLinear，
scalePow, scaleQuantise, scaleOrdinal, scaleSqrt, scaleLog, scaleSequential等等。
然后我们需要给定函数的定义域domain([])，最后需要给定函数的值域range([])。根据这些规则，
d3会为我们返回一个比例尺**函数**。

示例

var linearScale=d3.scaleLinear()
.domain([0,d3.max(dataset,function (d) {
    return d;
})])
.range([0,height]);
//这里linearScale为一个函数，我们可直接执行linearScale(d)

完整示例

import * as d3 from "d3";
var width=300;//svg画布宽
var height=200;//svg画布高
var rectWidth=30;//每个矩形的默认宽度
var dataset=[45,70,12,79,4,127,33,90];
//定义画布
var svg=d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height)
.style("background-color","yellow");
//定义比例尺
var linearScale=d3.scaleLinear()
.domain([0,d3.max(dataset,function (d) {
    return d;
})])
.range([0,height]);
//绑定数据集 绘制柱形图
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("width",rectWidth-2)
.attr("height",function (d,i) {
     return linearScale(d)
})
.attr("x",function (d,i) {
      return rectWidth*i
})
.attr("y",200)
.attr("transform",function (d,i) {
    return `translate(0,${linearScale(-d)})`
})
.attr("fill","blue")

结果

结果显示，数据集被比例尺进行缩放（scale）可视化出来。 d3还提供很多数据处理的方法，max min extent sum median mean shuffle等等。

坐标轴

要定义坐标轴，主要两个步骤：
（1）定义坐标轴的比例尺；
（2）定义坐标轴朝向，刻度；

示例

import * as d3 from "d3";

var width = 300;//svg画布宽
var height = 200;//svg画布高
var dataset = [45, 70, 12, 79, 4, 127, 33, 150];
var testDataset = [4.5, 7.0, 1.2, 7.9, 0.4, 12.7, 3.3, 9.0];
var rectWidth = 30;//每个矩形的默认宽度
//定义画布
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.style("background-color", "yellow");
//定义矩形比例尺
var linearScale = d3.scaleLinear()
.domain([0, d3.max(dataset, function (d) {
    return d;
})])
.range([0, 200]);

var g = svg.append("g")
.attr("transform", "translate(40,0)");

g.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("width", rectWidth - 2)
.attr("height", function (d, i) {
    return linearScale(d)
})
.attr("x", function (d, i) {
    return rectWidth * i
})
.attr("y", 200)
.attr("transform", function (d, i) {
    return `translate(0,${linearScale(-d)})`
})
.attr("fill", "blue");
//定义坐标轴比例尺
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, function (d) {
    return d;
})])
.range([200,0]);
//定义坐标轴
var yAxis = d3.axisLeft(yScale)
.ticks(5);
//调用坐标轴
g.append("g")
.attr("transform", `translate(0,0)`)
.call(yAxis);

结果

补充知识点

1.“g”标签
g标签是svg的常用标签，相当于一个容器标签，把相关元素进行组合。通过g标签组合在一起的元素，可以
通过g标签设置属性等，进行坐标变换等操作，如attr("transform","translate()"),进行元素平移；
2.定义坐标轴
    var yAxis = d3.axisLeft(yScale)
    .ticks(5);
首先需要设置坐标轴的朝向，这里是向左，将坐标轴的比例尺作为参数传入axisLeft中；
通过ticks设置刻度的数目（不过好像并没有什么用处）
3.call（）
    g.append("g")
    .attr("transform", `translate(0,0)`)
    .call(yAxis);
yAxis是我们定义的一个坐标轴，其实它本身也是一个函数，将新建的分组传给yAxis()函数，用以绘制，
所以这句代码等价于yAixs (g.append("g") ) ;

GPU云服务器云服务器入门篇 ASPNET入门数据篇机器人制作入门篇三分钟入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100023.html

d3入门篇（四）：绘制完整柱状图添加过渡效果

摘要：这篇学习笔记是入门篇的最后一部分，将前几篇的内容整合到一起，绘制带过渡效果的柱状图，这次先给大家看一下结果图。这篇学习笔记是入门篇的最后一部分，将前几篇的内容整合到一起，绘制带过渡效果的柱状图，这次先给大家看一下结果图。结果 showImg(https://segmentfault.com/img/bVblfGG?w=1230&h=1210); 前言先放结果图是想反馈一下在整合基...

Jason 2019-08-23 14:08 评论0 收藏0
交互式数据可视化－D3.js（三）比例尺

摘要：设置为，则所有超出值域范围的值，都会被收缩到值域之内。指数比例尺相对线性比例尺多出一个用于指定指数。这段代码中相当于定义一个线性比例尺。使用量子比例尺后定义域将被分成这段，分别对应值域的个值。线性比例尺线性比例尺是常用比例尺常用方法有： var linear = d3.scaleLinear() - 创建一个定量的线性比例尺. linear.domain([numbers]) - ...

huhud 2019-08-02 11:54 评论0 收藏0
交互式数据可视化－D3.js（三）比例尺

摘要：设置为，则所有超出值域范围的值，都会被收缩到值域之内。指数比例尺相对线性比例尺多出一个用于指定指数。这段代码中相当于定义一个线性比例尺。使用量子比例尺后定义域将被分成这段，分别对应值域的个值。线性比例尺线性比例尺是常用比例尺常用方法有： var linear = d3.scaleLinear() - 创建一个定量的线性比例尺. linear.domain([numbers]) - ...

graf 2019-08-23 12:42 评论0 收藏0
d3.js 使用坐标轴

摘要：本片记录坐标轴入门，使用版本如何实现坐标轴生成的坐标图是通过的路径元素元素组成的，如下图表示的是底部坐标轴不包括内部刻度，如下这部分通过描绘，在中称为容器则包括了和作为即线，即文字实现坐标轴主要步骤步骤主要如下创建比例尺创建坐标轴，是个函数本片blog记录d3坐标轴入门，使用版本v5.9.2 SVG如何实现坐标轴 d3生成的坐标图是通过svg的path(路径)元素 + g + lin...

Karuru 2019-08-23 16:43 评论0 收藏0
d3.js 创建完整柱形图

摘要：之前只是各个部分的，现在将各部分整合起来，发现还是学到了不少东西主要是加深了对比例尺的理解代码样式及数据样式接着是数据及柱状图宽高等留白用创建比例尺实践之后对比例尺与坐标轴的理解加深了一点轴使用线性比例尺，注意输入域轴使用比例尺用于柱形 d3js.org v5.9.2 之前只是各个部分的demo，现在将各部分整合起来，发现还是学到了不少东西主要是加深了对scale（比例尺）的理解...

snowLu 2019-08-23 16:44 评论0 收藏0