d3比例尺坐标轴

43次阅读

共计 2693 个字符,预计需要花费 7 分钟才能阅读完成。

这篇文章继续介绍 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 是我们定义的一个坐标轴,其实它本身也是一个函数,将新建的分组 <g> 传给 yAxis() 函数,用以绘制,
所以这句代码等价于 yAixs (g.append(“g”) ) ;

正文完
 0