D3基础---比例尺
转载请注明出处！
比例尺简述：
比例尺是一组把输入域映射到输出范围的函数。
一般来说数据集中的值不可能恰好与图表中的像素尺度一一对应。比例尺就是把这些数据值映射到可视化图形中使用的新值的便捷手段。
D3的比例尺就是那些你定义的带有参数的函数。
听到比例尺有些人就会想到最终图表中一系列的刻度线，对应一系列的值，不要搞错，这些刻度显示坐标轴的一部分，而坐标轴只是比例尺的一种形象的表示。比例尺实际上代表的是一种数学关系，不可能直接输出可见的图形。比例尺和坐标轴是两种不同但相关的东西。
下面我们只讨论线性比例尺。
值域和范围：
比例尺的输入值域（input domain）指的是可能的输入值的范围。
比例尺的输出范围（output range）指的是输出值的可能范围。
其实就是归一化，对于线性比例尺，d3可以帮助我们处理归一化过程的数学计算：输入值根据值域先进行归一化，然后再把归一化后的值对应到输出范围。
创建比例尺：
var scale = d3.scale.linear()
.domain([100, 500])
.range([10, 350]);
例如：
scale(100)输出是10，scale(300)输出是180…
缩放散点图：
var dataset = [
[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
[410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
];
返回所有坐标中X值中最大的：
d3.max(dataset, function(d) { //返回 480
return d[0]; //每一个子数组中的第一个位置的值
});
X轴缩放：
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[0]; })])
.range([0, w]);
Y轴缩放：
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([0, h]);
设定圆心的坐标（注意使用和坐标同样缩放尺度的坐标值）：
.attr("cx", function(d) {
return d[0];
})
缩放后的坐标X值：
.attr("cx", function(d) {
return xScale(d[0]);
})
Y值同样如此：
.attr("cy", function(d) {
return d[1];
})
缩放后的坐标Y值：
.attr("cy", function(d) {
return yScale(d[1]);
})
设定文本坐标值（同上）：
.attr("x", function(d) {
return d[0];
})
.attr("y", function(d) {
return d[1];
})
变成:
.attr("x", function(d) {
return xScale(d[0]);
})
.attr("y", function(d) {
return yScale(d[1]);
})
源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>testD3-10-scale.html</title>
<script type="text/javascript" src="d3.v3.js"></script>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 500;
var h = 100;
var dataset = [
[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
[410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
];
//Create scale functions
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[0]; })])
.range([0, w]);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([0, h]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
})
.attr("r", function(d) {
return Math.sqrt(h - d[1]);
});
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d[0] + "," + d[1];
})
.attr("x", function(d) {
return xScale(d[0]);
})
.attr("y", function(d) {
return yScale(d[1]);
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "red");
</script>
</body>
</html>
修饰图表：
点大小与圈大小成正比，想把大的放在下面，只要改变Y轴值域倒转即可： .range([h , 0]);
有些圆形的边缘会被切掉一部分，为此引入一个边距变量：
var padding = 20;
以便在设置两个比例尺的时候加入边距，边距可以把圆形往里推，使他们远离SVG的四边，从而避免被切掉。
xScale的返回改为：.range([padding, w-padding]);
但右边的文本仍然会被切掉，可以增大边距2*padding。
原来我们是把每个圆形的半径设置为y值的平方根，现在，我们同样可以为半径设置一个比例尺：
var rScale = d3.scale.linear()
.domain([0, d3.max(dataset,function(d) {
return d[1];
})])
.rangeRound([2, 5]);
然后再这样设定圆的半径：
.attr("r", function(d) {
return rScale(d[1]);
});
这样所有远的半径就永远介于2~5之间。
其他方法：
nice():
告诉比例尺取得range()设置的任何值域，把两端的值扩展到最接近的整数。“For example, for a domain of [0.20147987687960267, 0.996679553296417], the nice domain is [0.2, 1].”
rangeRound():
代替range之后，比例尺输出的所有值都会舍入到最接近的整数值。对输出值取整有助于图形对应精确地像素值，避免边缘出现模糊不清的锯齿。
clamp():
默认情况下，比例尺可以返回指定范围之外的值。比如，假设给定的值位于输入值域之外，那么比例尺也会返回一个位于输出范围之外的值。调用clamp之后就会强行所有输出值都要在指定范围内。意味着超出范围，会取整到范围的最大值或最小值。
源代码微调：
<!DOCTYPE html>
<html lang="en">
<head>
<title>D3: Linear scales with a scatterplot</title>
<script type="text/javascript" src="../d3/d3.js"></script>
<style type="text/css">
/* No style rules here yet */
</style>
</head>
<body>
<script type="text/javascript">
var w = 500;
var h = 300;
var padding = 20;
var dataset = [
[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
[410, 12], [475, 44], [25, 67], [85, 21], [220, 88], [600, 150]
];
//create scales function
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset,function
(d) {return d[0];})])
.rangeRound([padding,w-padding*2]);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset,function
(d) {return d[1];})])
.rangeRound([h-padding,padding]);
var rScale = d3.scale.linear()
.domain([0, d3.max(dataset,function
(d) {return d[1];})])
.rangeRound([2, 5]);
//create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//create circles
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
})
.attr("r", function(d) {
return rScale(d[1]);
});
//create text elements
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d){
return d[0] + "," + d[1];
})
.attr("x", function(d) {
return xScale(d[0]);
})
.attr("y", function(d) {
return yScale(d[1]);
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "red");
</script>
</body>
</html>
效果图：
For my lover, CC!
参考书籍：《数据可视化实战》
D3基础---比例尺的更多相关文章
- 数据可视化(7)--D3基础
一直想写写D3,觉得D3真心比较强大,基本上你能想出来的图表都能绘制出来,只不过使用起来比前几个要稍麻烦一点. 正好最近读完了<数据可视化实战>,将关于D3的知识梳理了一遍,写这篇博客记录 ...
- D3.js比例尺 定量比例尺 之 线性比例尺(v3版本)
定量比例尺 : 数学上有函数的概念,不是编程中所说的函数,如线性函数.指数函数.对数函数等,而指的是一个量随着另一个量的变化而变化.例如有一下线性函数 : y=2x+1该函数在二维坐标系中绘制出来的图 ...
- D3.js 比例尺的使用
比例尺是 D3 中很重要的一个概念,直接用数值的大小来代表像素不是一种好方法 一.为什么需要比例尺 制作一个柱形图,会有一个数组:var dataset = [ 250 , 210 , 170 , 1 ...
- D3基础--数轴
转载请注明出处! 概述: 与比例尺类似,D3的数轴实际上也使用来定义参数的函数.但与比例尺不同的是,调用数轴函数并不会返回值,而是会生成数轴相关的可见元素.包括:轴线,标签和刻度. 但是要注意数轴函数 ...
- D3.js比例尺 序数比例尺(v3版本)
上一章介绍了阈值比例尺:https://www.cnblogs.com/littleSpill/p/10825038.html.到目前所有的定量比例尺已经介绍完了. 现在给大家介绍一下序数比例尺. 定 ...
- D3基础---简介和数据
D3.js是一种数据操作类型的javascript库(也可视其为插件):结合HTML,SVG和CSS,D3可以图形化的,生动的展现数据. d3获取:http://d3js.org/ 在代码文件中引入D ...
- d3基础图形模板笔记
散点图(scatter plot): http://bl.ocks.org/weiglemc/6185069 雷达图(radar): http://xgfe.github.io/uploads/che ...
- d3基础入门一-选集、数据绑定等核心概念
引入D3 D3下载,本文下载时的版本为6.5.0 mkdir d3.6.5.0 unzip --help unzip d3.zip -d d3.6.5.0/ ls d3.6.5.0/ API.md C ...
- D3基础入门四-事件处理
6.5.0版 .on("mouseover", function(e,d) e: {"isTrusted":true} 第二个参考才是数据,但这在不同的环境可能 ...
随机推荐
- 徒手CPR心脏复苏
CPR 缩写于cardiopulmonary resuscitation. 在危难时刻,能救人救命,意义极其重大,赶紧学起来 成人的CPR 第一步:检查意识 靠近其耳朵,在两耳旁交替大声喊:「你怎么了 ...
- Eclipse中mvn install 报错error in opening zip file
报错信息 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:2.3.2:compile (de ...
- python - 实现文本分类[简单使用第三方库完成]
第三方库 pandas sklearn 数据集 来自于达观杯 训练:train.txt 测试:test.txt 概述 TF-IDF 模型提取特征值建立逻辑回归模型 代码 # _*_ coding:ut ...
- JAVA输入随笔
做题时经常遇到输入的问题,很麻烦 写一点点自己对于输入的随笔,以备后查 这里都以整数为例,其他类型的话换成相应方法就行了 1.知道一共多少行,每一行只有一个整数 这是比较简单的输入,可以用Scanne ...
- celery简单理解和使用
解决同步阻塞的问题 将耗时任务放到后台异步执行,不影响用户其他操作. 实现原理 任务队列是一种跨线程,跨机器的机制. 任务队列中包含称作任务的工作单元.有专门的进程持续不断的监视任务队列,并从中得到新 ...
- Python多继承解析顺序的C3线性算法流程解析
Python多继承MRO 在Python2.1中,采用了经典类,使用深度优先算法解析. Python2.2中,引入了新式类,使用深度优先算法和广度优先算法. 在Python2.3以后的版本中,经典类和 ...
- python高级（二）—— python内置序列类型
本文主要内容 序列类型分类: (1)容器序列.扁平序列 (2)可变序列.不可变序列 列表推导式 生成器表达式 元组拆包 切片 排序(list.sort方法和sorted函数) bisect pytho ...
- 网络基础 01_OSI网际互联
1 通信概述 网络是用物理链路将各个孤立的工作站或主机相连在一起,组成数据链路,从而达到资源共享和通信的目的. 通信是人与人之间通过某种媒体进行的信息交流与传递. 网络通信是通过网络将各个孤立的设备进 ...
- POJ_3468 A Simple Problem with Integers 【线段树区间查询+修改】
一.题目 POJ3468 二.分析 裸的线段树区间查询+修改. 三.AC代码 #include <cstdio> #include <iostream> #include &l ...
- dubbo核心流程一览
整体设计 图中从下至上分为十层,各层均为单向依赖,右边的黑色箭头代表层之间的依赖关系,每一层都可以剥离上层被复用,其中,Service 和 Config 层为 API,其它各层均为 SPI. Serv ...